Vue.set()實現資料動態響應

李一花發表於2018-07-23
Vue

在vue裡面，我們操作最多的就是各種資料，在jquery裡面，我們習慣通過下標定向找到資料，然後重新賦值

比如var a[0]=111;（希望上家公司原諒菜鳥的我寫了不少這樣的程式碼）

下面上程式碼

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <div id="app">
         <ul>
             <li v-for="item in listData">{{item}}</li>
        </ul>
        <a href="javascript:void(0)" v-text="he" @click="changeData()"></a>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            he:"點我",
            listData:["a","b","c"]
          },
        methods:{
              changeData () {
                  this.listData[0]="d";
              }
            }
    })
</script>
</html>

當我點選按鈕時候，發現沒有任何變化，頁面上還是a,b,c 輸入圖片說明

vue當然不會這麼菜呢

下面是偉大的vue內建的方法來了

Vue.set() 官方解釋： 設定物件的屬性。如果物件是響應式的，確保屬性被建立後也是響應式的，同時觸發檢視更新。這個方法主要用於避開 Vue 不能檢測屬性被新增的限制。

我的理解就是觸發檢視重新更新一遍，資料動態起來

Vue.set(a,b,c)

a是要更改的資料 b是資料的第幾項 c是更改後的資料

解決上面資料不能更改後的程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <div id="app">
         <ul>
             <li v-for="item in listData">{{item}}</li>
        </ul>
        <a href="javascript:void(0)" v-text="he" @click="changeData()"></a>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            he:"點我",
            listData:["a","b","c"]
          },
        methods:{
              changeData () {
                  Vue.set(this.listData,0,`X`)
              }
            }
    })
</script>
</html>

我們可以看到，this.listData陣列的第一項已經被更改了

輸入圖片說明

原文釋出時間為：2018年02月07日
原文作者：不負好時光

本文來源：開源中國 如需轉載請聯絡原作者


相關文章