发现问题

v-for虽然能渲染页面,但是有一个问题,在没有绑定key的情况下更新数据时,有时候会出现一些渲染问题。
来自官网内容:它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。

比较难以描述,也难以理解,这里使用黑马程序员教程中用到的例子来展示:

https://vue.magicbeans001.work/vue/v-for_checkbox.html

这里也放上源码和解释

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
 ? ?<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
 ? ?<div>
 ? ? ? ?<label>
 ? ? ? ? ?  ID:<input type="text" v-model="id">
 ? ? ? ?</label>
 ? ? ? ?<label>
 ? ? ? ? ?  NAME:<input type="text" v-model="name">
 ? ? ? ?</label>
 ? ? ? ?<input type="button" value="add" @click="add">
 ? ?</div>
 ? ?<p v-for="item in list" v-bind:key="item">
 ? ? ? ?<input type="checkbox">
 ? ? ?  ID:{{item.id}}---{{item.name}}
 ? ?</p>
</div>

<script>
 ? ?var vm = new Vue({
 ? ? ? ?el: '#app',
 ? ? ? ?data: {
 ? ? ? ? ? ?id:'',
 ? ? ? ? ? ?name:'aaa',
 ? ? ? ? ? ?list: [
 ? ? ? ? ? ? ?  {id: 1, name: 'a'},
 ? ? ? ? ? ? ?  {id: 2, name: 'b'},
 ? ? ? ? ? ? ?  {id: 3, name: 'c'},
 ? ? ? ? ? ? ?  {id: 4, name: 'd'},
 ? ? ? ? ? ? ?  {id: 5, name: 'e'}
 ? ? ? ? ?  ]
 ? ? ?  },
 ? ? ? ?methods: {
 ? ? ? ? ? ?add(){
 ? ? ? ? ? ? ? ?// alert("ok")
 ? ? ? ? ? ? ? ?// this.list.push({id:this.id,name:this.name})
 ? ? ? ? ? ? ? ?alert("click")
 ? ? ? ? ? ? ? ?this.list.unshift({id:this.id,name:this.name})
 ? ? ? ? ?  }
 ? ? ?  }
 ?  })
</script>
</body>
</html>

其中add()中的方法unshift会在list数组开头插入一条数据,而posh是在list结束。在一开始勾选数据后(推荐勾选除了头1尾5这两条数据以外的数据,这样比较能显示问题),再以unshift插入数据就会发现有问题。例如:我勾选了2号数据,在我unshift插入后会变为1号数据。推荐自己试试

原因也很简单,因为没有将数据绑定,checkbox,id,name虽然是通过循环渲染的,但是并没有关联。导致插入更新新数据时,位置出错。

解决问题

很方便的方法

<div v-for="item in items" v-bind:key="item.id"> ? <!-- 内容 --> </div>

key只支持字符串和数字,并且建议尽可能在使用 v-for 时提供 key attribute。
这样每次循环所有属性将会以key为标识组成一组,不再会出现错位问题。

最后修改:2020 年 10 月 21 日 12 : 11 AM
如果觉得我的文章对你有用,请随意赞赏