Javascript 创建一个动态列表，在每个对象下方弹出（在vue中）

我不认为Vue是必要的，因为现在大多数都是用javascript/css完成的

我正在尝试创建一个如下所示的列表：

   [A] [B]
   [C] [D]

<template v-for item in items>
 <div class="header" @click="isVisible = true">
 <div class="details" v-show="isVisible">
</template>

单击某个项目后，该项目的相关信息将显示为未学习状态，如下所示：（箭头指示单击了哪个项目

   [A]    [B]        [A]    [B]
   [^ A-Info]        [C]    [D]
   [C]    [D]        [D-Info ^]

我试图通过创建一个对象列表来实现这一点，每个对象都包含标题信息和下面的详细信息。 我正在v-for中创建元素，如下所示：

   [A] [B]
   [C] [D]

<template v-for item in items>
 <div class="header" @click="isVisible = true">
 <div class="details" v-show="isVisible">
</template>

---

这样做的原因很明显，因为这是它们在dom对象中的顺序。我的解决方案是创建两个标题对象，在它们下面创建一个详细信息，并使用单击的标题对象中的信息填充其中一个，但这似乎是一个太高级的解决方案。是否可以简单地用css或其他方法解决lse？

在不知道数据外观的情况下，很难提供完整的解决方案。但是，您所描述的内容听起来很像一个选项卡式布局，可能有多行选项卡。您可以使用

v-show

指令完成您想要的内容，如果它与您选择的项目相匹配，则只显示详细信息部分。F或例如：

HTML：

<div id="app">
  <table>
    <template v-for="row in rows">
      <tr>
        <th
          v-for="item in row"
          v-text="item.label"
          :class="{ selected: item.id === selectedId }"
          @click="selectItem(item.id)"        
        ></th>
      </tr>
      <tr>
        <td      
          :colspan="row.length"      
          v-for="item in row"
          v-show="item.id === selectedId"
          v-html="item.details"
        ></td>
      </tr>
    </template>
  </table>
</div>

new Vue({
  el: "#app",
  data: {
    selectedId: 1,
    rows: [
      [
        {
          id: 1,
          label: "Item A",
          details: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies vitae massa vel cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum finibus iaculis.'
        },
        {
          id: 2,
          label: "Item B",
          details: 'Mauris placerat, est in finibus consectetur, ligula urna imperdiet velit, vel interdum lacus turpis a nisi. Etiam et neque sed dui maximus posuere.'
        }
      ],
      [
        {
          id: 3,
          label: "Item C",
          details: 'Vivamus consectetur maximus diam tincidunt bibendum. Fusce quis euismod risus.'
        },
        {
          id: 4,
          label: "Item D",
          details: 'Nam convallis diam sit amet purus lacinia, in euismod sem porttitor. Sed magna quam, consequat in aliquet ut, faucibus nec massa.'
        }
      ]
    ]
  },
  methods: {
    selectItem(id) {
        this.selectedId = id;
    }
  }
})

/* Styles */

table {
  padding: 20px;
}
th {
  padding: 10px 20px;
  cursor: pointer;
}
th.selected {
  background-color: lightgray;
}
td {
  padding: 20px;
  background-color: lightgray;
}

CSS：

<div id="app">
  <table>
    <template v-for="row in rows">
      <tr>
        <th
          v-for="item in row"
          v-text="item.label"
          :class="{ selected: item.id === selectedId }"
          @click="selectItem(item.id)"        
        ></th>
      </tr>
      <tr>
        <td      
          :colspan="row.length"      
          v-for="item in row"
          v-show="item.id === selectedId"
          v-html="item.details"
        ></td>
      </tr>
    </template>
  </table>
</div>

new Vue({
  el: "#app",
  data: {
    selectedId: 1,
    rows: [
      [
        {
          id: 1,
          label: "Item A",
          details: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies vitae massa vel cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum finibus iaculis.'
        },
        {
          id: 2,
          label: "Item B",
          details: 'Mauris placerat, est in finibus consectetur, ligula urna imperdiet velit, vel interdum lacus turpis a nisi. Etiam et neque sed dui maximus posuere.'
        }
      ],
      [
        {
          id: 3,
          label: "Item C",
          details: 'Vivamus consectetur maximus diam tincidunt bibendum. Fusce quis euismod risus.'
        },
        {
          id: 4,
          label: "Item D",
          details: 'Nam convallis diam sit amet purus lacinia, in euismod sem porttitor. Sed magna quam, consequat in aliquet ut, faucibus nec massa.'
        }
      ]
    ]
  },
  methods: {
    selectItem(id) {
        this.selectedId = id;
    }
  }
})

/* Styles */

table {
  padding: 20px;
}
th {
  padding: 10px 20px;
  cursor: pointer;
}
th.selected {
  background-color: lightgray;
}
td {
  padding: 20px;
  background-color: lightgray;
}

---

我已经添加了一个供您使用的应用程序。

您可以共享您试图填充此布局的数据的结构吗？即，

[{标签：“项目a”，详细信息：“Lorem ipsum yada yada”}，

这基本上就是我的数据的外观是。{标题，入口，图像URL}但它是可以改变的，它还没有固定下来。我明天会试试你的答案，但它看起来确实像我想做的！谢谢你，我会再给你回复。顺便说一句，有没有可能让这一行变得动态而没有太多的麻烦？如果窗口有700行，比如1行，否则2行？是的，这并不太复杂。你只需要收听

窗口。调整大小

事件。它工作得很好。我没有使用表格，而是使用了div（已经有css了，所以不需要表格）但是嵌套for循环的想法很棒。然后我有一个函数将输入列表转换为列表列表，每个列表代表一行，就像你的例子一样。我有一个函数，你觉得怎么样？