发现问题
v-for
虽然能渲染页面,但是有一个问题,在没有绑定key的情况下更新数据时,有时候会出现一些渲染问题。
来自官网内容:它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。
比较难以描述,也难以理解,这里使用黑马程序员教程中用到的例子来展示:
这里也放上源码和解释
<!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为标识组成一组,不再会出现错位问题。
此处评论已关闭