初次用Vue编写todo MVC 中 v-for 的 key 值问题

最新推荐文章于 2022-06-05 21:44:40 发布

weixin_45827629

最新推荐文章于 2022-06-05 21:44:40 发布

阅读量141

点赞数 4

文章标签： vue javascript vscode

本文链接：https://blog.csdn.net/weixin_45827629/article/details/119002200

版权

刚刚接触了 Vue三天，用Vue 做了todoMVC 这个入门经典案例。

在我为这个案例编写完成而高兴时，在 active 和 completed 这个两个模块中发现了问题。

按思路来讲 Active 模块中存放的都是已完成的任务，当我在圆形 checkbox 中勾选时对应的条目应该消失，变成已完成项目。不应该像上图所示有对号的样式残留。

再我找了好久之后，才发现原来是在编写 "v-for" 循环时为标签动态绑定的key是数组下标。在我绑定 :key的是每个对象的id即唯一标识时这个问题就迎刃而解了。

下面就来谈一谈 "v-for"的key值问题。

我们先写一个简单的实例

<body>
  <div id="app">
    <h2>人员列表</h2>
    <ul >
       <button @click="add">添加一个老刘</button>
      <li v-for="(item,index) in persons" :key="index">
        {{item.name}}--{{item.age}} <input type="text">
      </li>
      
    </ul>
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el:"#app",
      data:{
        persons:[
          {id:"001",name:"张三",age:18},
          {id:"002",name:"李四",age:19},
          {id:"003",name:"王五",age:20}
      ],
      newP:{id:"004",name:"老刘",age:30}
      },
      methods: {
        add(){
          this.persons.unshift(this.newP)
        }
      },
    })
  </script>
</body>