Question

无法更加相关地标题，对不起......

我的数据属性中有一个[]，它通过外部API调用来填充项目
我使用模板中主div 上的v-for循环[]并填充页面
每个主要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

您必须保留密钥和值的名称，不要重命名。

<div v-for="(value, key, index) in Your-object">
  {{ index }}. {{ key }}: {{ value }}
</div>

Answer 2

这里的问题是，您有一个属性为true或false，用于打开所有div displayDiv ，而不是 per 项。

    data(){
        return{
            myArray: [],
            displayDiv: false
        }
    }

如果您无法修改在远程位置接收的阵列的数据项，那么您可以简单地循环这些项目，并在收到后将属性添加到每个项目。

像这样：

// I'll assume your api looks somewhat like this

 return axios.get('apirequest')
.then(function (res) {

// Create a new list 
var listOfItemsWithAddedProp = [];

// Loop all the items of the response..
for(var item of res.data){

    // ..and add one or multiple props
    item.open = false;

    // Then push modified item to the new list
    listOfItemsWithAddedProp.push(item);
}

// Return or set the new list to your "myArray" in your example
return listOfItemsWithAddedProp;

}）

Answer 3

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

主要组成部分：

<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>

Answer 4

 <div v-for="(langue, index) in langues" :key="index" >
    {{langue.text}}
 </div>

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

4 个答案: