发现问题

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
如果觉得我的文章对你有用,请随意赞赏