首先看下面这段代码：

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset="utf-8" />
    <title>Hello world</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="root">
        <div v-for="(item,index) of list" :key="item.id">
            {{item.text}}---{{index}}
        </div>
    </div>


    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                list: [{
                    id: "ffasf-fsdnsaf7er5",
                    text: "hello"
                }, {
                    id: "778esf-f7er5",
                    text: "world"
                }]
            }
        })

    </script>
</body>

</html>

当我们通过下表改变一个对象值的时候，页面渲染跟着变了，可是当我们给数组再增加一个元素时，页面结果并没有改变。

我们不能通过下表的方式来直接操作数据，可以有以下几种方式解决。

1.应用数组变异方法，push,pop,shift,unshift,splice,sort,reverse来操作数组。

2.重新修改对象的引用

3.用Vue中的方法Vue.set

4.用vue实例中的方法$set

 

Logo
Vue

前往低代码交流专区

更多推荐

cover

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

avatar Vue
cover

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue