html - 在 VUEJS 中单击时，仅在多张卡片上显示特定的切换

Question

我正在研究这个功能，我有多张卡片，里面有一个切换开关。

我从 api 获取卡片的值，并使用当我尝试单击切换时，卡片上的切换打开，我想在其中显示特定的卡片切换。

这是它的代码：

<div v-for="values in api" :key="values.id">
<card>
   <li>
     <b-link v-b-toggle.collapse>
      {{ value.name }}
      </b-link>
      <b-collapse id="collapse">
      <pre>
         {{ value.address }}
      </pre>
      </b-collapse>
   </li>
</card>
<div>

请协助

标签： htmlvuejs2

Answer 1

问题在于折叠的相同 id 属性。您需要更改 id 分配。试试下面的代码：

<div v-for="values in api" :key="values.id">
 <card>
   <li>
     <b-link v-b-toggle="`collapse-${values.id}`">
      {{ value.name }}
      </b-link>
      <b-collapse :id="`collapse-${values.id}`">
      <pre>
         {{ value.address }}
      </pre>
      </b-collapse>
   </li>
 </card>
<div>