vue中，对象数组多层嵌套时，更新页面数据

这里用到的vue中的this.$set方法

一、什么是this.$set 为什么要用 怎么用

　　1、当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')，你会发现vue官网是vue.set，vue.set的用法（vue官方解释）。

       2、用法：

举个例子：

numberData: [

            {

                number: {

                number: '1',

                toFixed: 0,

                content: "{nt}"

                },

                text: "在线设备",

                unit:"(台)"

            },

            {

                number: {

                number: '2',

                toFixed: 0,

                content: "{nt}"

                },

                text: "设备总数",

                unit:"(台)"

            }

 ],

（1）例如在这样的数组中的对象嵌套对象的结构，怎么去赋值才会正常的把数据渲染在页面中呢？下面给大家介绍this.$set的用法：

         调用方法：this.$set( target, key, value )

         target：要更改的数据源(可以是对象或者数组)

         key：要更改的具体数据

        value ：重新赋的值

      mouted(){

           this.numberData[2] = {number:{number:'更改的值'}} //这时已经给他重新赋值了

     },

     methods:{

         this.$set(this.numberData,2,{number:{number:'更改的值'}}) //用this.$set把数据更新到视图上去

    }

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！