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

Posted 2023-02-23

【中文标题】v-for 循环和 key 属性的使用

【英文标题】：v-for loop and use of key attribute

【发布时间】：2017-09-14 05:54:47

【问题描述】：

无法更相关地框出标题，对此感到抱歉....

我的数据属性中有一个 [ ]，它通过来自外部 API 的调用填充了项目

我在模板中的 ma​​in div 上使用 v-for 循环 [ ] 并填充页面

每个ma​​in div中都有一个toggleable 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还是我应该使用任何逻辑

【问题讨论】：

简单，在 v-for 中创建一个新的 vue 组件，'item'： 将 item 作为 prop 传递给它，然后在 item 组件中保留displayDiv 数据项及其行为。这样，每个项目都会有自己的 displayDiv（以及是否显示的行为）。

@click="click="toggleDiv"" 应该是 @click="toggleDiv()"

@M.Suurland 我会试试你的方法

@user7814783 我将举一个简短的例子作为答案。

【参考方案1】：

你必须像这样留下键和值的名称，不要重命名它。

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

【参考方案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;

)

【参考方案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>

【参考方案4】：

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