javascript - Vue 与 bootstrap-vue : prevent more than one expanded list-element at all times in list (v-for)

Question

我正在将 vue 与 bootstrap-vue 和 b-collapse 功能一起使用，在本例中它用于 v-for(列表)..

它运行良好，只是我不知道如何在单击新列表元素进行扩展时自动关闭扩展的列表元素。

所以我的问题是:

当我单击新的列表元素进行扩展时，如何关闭已扩展的元素？

备注:我正在生成具有如下唯一值的 v-b-toggle="":

<i v-b-toggle="'collapse' + key + index"

这是我的代码:

<div v-for="(item, key, index) in nluData">
   <div v-for="(item, key, index) in nluData">
       <div class="alert alert-warning">
           <i v-b-toggle="'collapse' + key + index">&nbsp;</i>
       </div>

   <b-collapse :id="'collapse' + key + index">
       <b-card style="background-color:#f0f8ff; margin-right:-30px;">
           ....
       </b-card>
   </b-collapse>
</div>

@sklingler93 建议后更新:

更改为以下内容:

<i @click="expanded=key">&nbsp;</i>
<b-collapse :id="'collapse' + key + index" visible="key == expanded">

Vue 数据属性:

 export default {
data() {
      return {
          expanded: 0
          }
      }

我在扩展上尝试了不同的类型(字符串、 bool 值、整数) 最终一切都展开了，并出现以下警告:

Invalid prop: type check failed for prop "visible". Expected Boolean, got String.

Answer 1

b-collapse 有一个可以设置的可见属性。因此，如果您在 data 中声明一个变量来跟踪哪个 b-collapse 被展开，您可以使用它:

<div v-for="(item, key, index) in nluData">
   <div v-for="(item, key, index) in nluData">
       <div class="alert alert-warning">
           <i @click="expanded=key">&nbsp;</i>
       </div>

   <b-collapse :visible="key === expanded">
       <b-card style="background-color:#f0f8ff; margin-right:-30px;">
           ....
       </b-card>
   </b-collapse>
   </div>
</div>