Vue重复键错误修复及数组渲染、变量存入数组方法

1. 解决Duplicate keys detected错误 #

问题根源在于你给v-for绑定的:key="item"是把整个对象作为key——Vue无法将对象转化为唯一标识字符串，因此触发重复键报错。另外你写的v-for="item,number in items"参数顺序有误，第二个参数是数组的索引，不是number。

两种修复方案：

• 简单方案：用数组索引当key（适合数组不会新增、删除或重新排序的场景）
• 推荐方案：给每个items对象添加唯一id（适合需要动态修改数组的场景）

索引版修正代码 #

<div class="container">
  <div v-for="(item, index) in items" :key="index" class="bar">
    <p class="text">{{ item.text }}</p>   
    <br>
    <p class="number">{{ item.number }}</p>         
  </div>
</div>

唯一id版修正代码 #

先给数据添加唯一id：

items: [
  {id: 1, text: 'CIO用户总数:' , number: "info"},
  {id: 2, text: '参会成员总数:', number: 'attending' },
  {id: 3, text: '未参会成员总数:', number: 'not_attending' },
  {id: 4, text: '已参会成员总数:', number: 'attended' },
]

然后模板绑定id作为key：

<div class="container">
  <div v-for="item in items" :key="item.id" class="bar">
    <p class="text">{{ item.text }}</p>   
    <br>
    <p class="number">{{ item.number }}</p>         
  </div>
</div>

注意：子元素<p>不需要额外加key，父元素已经有唯一key，子元素加key属于多余操作，反而可能引发冲突。

2. 同时渲染text与number内容 #

上述修正后的代码已经实现了同时渲染item.text和item.number字段。另外你原始的data定义存在语法错误：第三、第四个对象中的分号;要改成逗号,，最后一个字段attented拼写错误，应改为attended，修正后数据才能正常解析。

3. 将变量数据存入items数组 #

直接使用数组的push方法即可，Vue会自动监听数组变化并更新视图：

Vue2选项式API写法 #

// 定义要添加的变量数据
const newStatItem = {
  id: 5, // 用id作为key时需保证唯一性
  text: '新增统计项:',
  number: 'new_stat_data'
}

// 将数据添加到items数组
this.items.push(newStatItem)

Vue3组合式API写法 #

import { ref } from 'vue'

export default {
  setup() {
    const items = ref([
      // 初始数据
    ])

    const addNewItem = () => {
      const newItem = {
        id: items.value.length + 1,
        text: '新增统计项',
        number: 'new_data'
      }
      items.value.push(newItem)
    }

    return { items, addNewItem }
  }
}

内容的提问来源于stack exchange，提问作者Anton Shupeniuk