Question

做v-show来基于index切换元素的最佳解决方案是什么，我设法完成了切换部分，但是当您单击当前打开的元素时，它不会关闭。

<div v-for="(btn, index) in dataArray">
      <button @click="toggle(index)">{{ btn.name }}</button>
      <p v-show="isOpenIndex === index"> {{ btn.desc }} </p>
    </div>

如果我添加了虚假条件，则当您单击另一个按钮时，它将关闭打开的条件，但不会打开您单击的元素

<div v-for="(btn, index) in dataArray">
  <button @click="toggle(index)">{{ btn.name }}</button>
  <p v-show="isOpenIndex === index" v-if="isOpen"> {{ btn.desc }} </p>
</div>

https://pypi.org/project/requests/2.19.0/

Answer 1

修改1： 正如@MrNew所说，toggle方法中的三元运算符就足够了：

...
methods: {
    toggle: function(index){
        this.isOpenIndex = ( this.isOpenIndex == index ) ? null : index;
    }
}

原始答案：

在您的toggle方法中添加两个条件：如果定义了isOpenIndex，请检查它是否与当前元素的index匹配以将其关闭（将其返回到null）如果没有，请将其设置为index。如果未定义，请将其设置为index：

methods: {
    toggle: function(index){
        if( this.isOpenIndex !== null ){
           this.isOpenIndex = ( this.isOpenIndex == index ) ? null : index;
        } else {
           this.isOpenIndex = index;
        }
    }
}

Vuejs使用索引和false v-if进行元素切换的简单动态v-show

1 个答案: