vue this.$set解決視圖未同步更新

視圖未更新原因:在vue2中用數組下标修改值時或者新增對象Key值時 這樣vue的devsrve函數是監聽不到資料的變化的是以就會導緻資料更新視圖未更新

1.數組利用下标修改值 (錯誤示範)

new Vue({
        el: "#app",
        data: {
            arr: ["清單1", '清單2'],
            newObj: { a: "123" }
        },
        methods: {
            upDateData() {
                this.arr[0] = "清單0" // !錯誤的 這樣是不響應的
            }
        }
    })
           

解決方案:

    ① 可以利用this.$set()  

     參數一：目标資料

     參數二：目标資料的下标或者key值

      參數三：所賦予的值

new Vue({
        el: "#app",
        data: {
            arr: ["清單1", '清單2'],
            newObj: { a: "123" }
        },
        methods: {
            upDateData() {
                     this.$set(this.arr, 0, "清單0")
                     //this.$set(目标數組, 元素索引号, "屬性修改為")
            }
        }
    })
           

2.對象新增key值時 (錯誤示範)

new Vue({
        el: "#app",
        data: {
            arr: ["清單1", '清單2'],
            newObj: { a: "123" }
        },
        methods: {
            upDateData() {
                this.newObj.b="456" //！這樣給對象新加key值得方式是不響應的
            }
        }
    })
           

解決方案

   ①  利用this.$set()

new Vue({
        el: "#app",
        data: {
            arr: ["清單1", '清單2'],
            newObj: { a: "123" }
        },
        methods: {
            upDateData() {
                this.$set(this.newObj, "b", "456")
               // this.$set(目标對象, "新增的屬性名", "新增的屬性值")
            }
        }
    })