Currently, I believe that Vue may not be necessary since most tasks can be done using JavaScript and CSS.
I am attempting to design a list layout as follows:
[A] [B]
[C] [D]
When an item is clicked, the information about that specific item should appear below it, indicated by an arrow.
[A] [B] [A] [B]
[^ A-Info] [C] [D]
[C] [D] [D-Info ^]
To achieve this, I plan on creating a list of objects, each containing header info and details. I will use v-for to create the elements like this:
<template v-for="item in items">
<div class="header" @click="isVisible = true">
<div class="details" v-show="isVisible">
</template>
However, when an item is clicked, the layout ends up looking like this:
[A]
[^ ]
[B] [C]
[D]
This happens due to the order of elements in the DOM object. One solution could involve creating two header objects and one details section underneath them, populated with information from the clicked header. However, this seems like a complex solution. Is there a simpler way to approach this issue using CSS or another method?