Vue使用v-for显示列表时，数组里的item数据更新，视图中列表不同步更新的解决方法

时间：2023-05-13 08:14:19
  • 由于初始化类型错误导致的不更新，代码是这样的：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

</head>

<body>

    <div id="app-7">

        <div @click="update()">update</div>

        <ol>

            <li v-for="item in groceryList" v-bind:key="item.id">

                {{item.text}}

            </li>

        </ol>

    </div>

</body>

<script type="text/javascript">

    var app7 = new Vue({

        el: '#app-7',

        data: {

            groceryList: []

        },

        methods: {

            update: function() {

                this.groceryList[0].text = "newvalue"

            }

        },

        created: function() {

            let adddata = [];

            adddata.id = 0;

            adddata.text = "test";

            this.groceryList.push(adddata);

        }

    });

</script>

</html>

使用索引直接更新数组中的项目，比如：

 this.groceryList[0].text = "newvalue"

发现视图中的项目并不会更新

问题出在 let adddata = []; 写错了，让adddata是一个数组类型了，vue在监听数据更新的时候，判断是数组类型，并不会对它的属性的变更做处理，而只会对数组里元素的改变做处理，把 let adddata = []; 改成 let adddata = {};即可

或这样也可以：

let adddata = {

                id: 0,

                text: "test"

            };

this.groceryList.push(adddata);
  • vue不能检测到数组元素的直接赋值，比如：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

</head>

<body>

    <div id="app-7">

        <div @click="update()">update</div>

        <ol>

            <li v-for="item in groceryList" v-bind:key="item.id">

                {{item.text}}

            </li>

        </ol>

    </div>

</body>

<script type="text/javascript">

    var app7 = new Vue({

        el: '#app-7',

        data: {

            groceryList: []

        },

        methods: {

            update: function() {

                this.groceryList[0] = {

                    id: 0,

                    text: "newvalue"

                };

            }

        },

        created: function() {

            let adddata = {

                id: 0,

                text: "test"

            };

            this.groceryList.push(adddata);

        }

    });

</script>

</html>
 this.groceryList[0] = {

                    id: 0,

                    text: "newvalue"

                };

            }

vue不能检测这种改变，只能检测到push,pop等元素出入栈的操作

可以改成这样,把旧元素替换成新元素（旧元素出栈，新元素入栈）

update: function() {

                this.groceryList.splice(0, 1, {

                    id: 0,

                    text: "newvalue"

                });

            }

        },

即使groceryList是一个普通的非对象数组，也需要这样才能同步更新视图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

</head>

<body>

    <div id="app-7">

        <div @click="update()">update</div>

        <ol>

            <li v-for="item in groceryList" v-bind:key="item.id">

                {{item}}

            </li>

        </ol>

    </div>

</body>

<script type="text/javascript">

    var app7 = new Vue({

        el: '#app-7',

        data: {

            groceryList: []

        },

        methods: {

            update: function() {

                //this.groceryList[0] = "newvalue";//不行

                this.groceryList.splice(0, 1, "newvalue");

            }

        },

        created: function() {

            let adddata = "test";

            this.groceryList.push(adddata);

        }

    });

</script>

</html>

相关文章