v-for循环和键属性的使用

Question

无法更恰当地设置标题，对此表示抱歉。

• 我的数据属性中有一个[]，其中充满了来自外部API的调用

• 我在模板v-for的主div上循环使用[] ，并填充页面

• 每个主div中都有一个可切换的div，默认情况下它是隐藏的，并且可以切换是否显示

这是代码

<template>

  <div>    
      // MAIN DIV
      <div v-for="(item, index) in myArray :key="index"> 
          //populate the elements using revelevant data
        <button @click="toggleDiv"">show/hide</button>

        //togglelable div
           <div v-if="displayDiv">
            //some data
        </div>
      </div>
  </div>
</template>

<script>
    export default{
        data(){
            return{
                myArray: [],
                displayDiv: false
            }
        },
        methods: {
            toggleDiv(){
                this.displayDiv = !this.displayDiv;
            }
        }

    }
</script> 

所以这是我的问题

• 当我单击特定div中的按钮以显示隐藏的div时，其余所有div的所有隐藏的div也都将显示

• 我如何限制这种情况的发生，以便在单击该div的相应按钮时仅切换相应的隐藏div

• 我应该使用key属性让vue区分div还是我应该使用任何逻辑

Answer 1

为您的单个项目创建一个新组件，并封装在其中显示或不显示该项目的行为。

主要成分：

<template>

    <div v-for="item in myArray"> 
     <item :item=item>
    </div>
    ...

</template>

<script>

    import Item from './Item.vue'
    ...
    export default{
      components: {
        Item
      }
    }

</script>

物品组成：

<template>
  <div>
     <button @click="toggleDiv()"">show/hide</button>
     <div v-if="displayDiv">
      ...
     </div>
  </div>
</template>



 <script>
    export default{
        props: ['item']
        data(){
            return{
                displayDiv: false
            }
        },
        methods: {
            toggleDiv(){
               this.displayDiv = !this.displayDiv;
            }
        }
    }
 </script>