https://blog.csdn.net/qq_37041819/article/details/105644405
這里我定義了一個列表數據，我將通過按鈕來控制列表數據。
比如我們修改一個數組其中的一個值，或者添加一條數據時，不管用。
<template> <div id="app" style="padding: 100px"> <el-link type="primary" v-for="item in items" :key="item.id" style="margin-right: 10px">{{item.message}}</el-link> <el-button @click='btn2Click()'>動態賦值</el-button> </div> </template> <script> import Vue from 'vue' export default { name: "test", data() { return{ items:[ {message:"Test one",id:"1"}, {message:"Test two",id:"2"}, {message:"Test three",id:"3"} ] } }, methods:{ btn2Click(){ this.items[0] = {message:"Test four",id:"10"} console.log(this.items) }, }, } </script>
當我點擊按鈕通過JS賦值的方法,將Tset one改為 Test four時，發現控制台已經改變了，但是視圖並沒有更新
因此修改失敗
Vue.set() 方法
調用方法：Vue.set( target, key, value )
target：要更改的數據源(可以是對象或者數組)
key：要更改的具體數據
value ：重新賦的值
<template> <div id="app" style="padding: 100px"> <el-link type="primary" v-for="item in items" :key="item.id" style="margin-right: 10px">{{item.message}}</el-link> <el-button @click='btn2Click()'>動態賦值</el-button> </div> </template> <script> import Vue from 'vue' export default { name: "test", data() { return{ items:[ {message:"Test one",id:"1"}, {message:"Test two",id:"2"}, {message:"Test three",id:"3"} ] } }, methods:{ btn2Click(){ Vue.set(this.items,0,{message:"Test four",id:"10"}) console.log(this.items) }, }, } </script>
還是點擊按鈕如下圖
這次控制台變化的同時，視圖頁面也跟着變化
總結：
在vue文檔中寫着如果在實例創建之后添加新的屬性到實例上，它不會觸發視圖更新
數據發生變化視圖不更新 那就要Vue.set方法來設置