怎么解決Vue綁定對象與數組變量更改后無法渲染的問題

本篇內容主要講解“怎么解決Vue綁定對象與數組變量更改后無法渲染的問題”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么解決Vue綁定對象與數組變量更改后無法渲染的問題”吧!

項目場景：

在頁面顯示上有一個<ul>標簽，我們需要動態進行列表數據的展示，而由于我們的頁面上除了列表值，還有其他的值要進行展示，因此列表數據的數據結構是某個對象下面的數組，在動態修改數據后發現沒有進行自動渲染。

問題描述：

在點擊按鈕“click me!”時雖然數據有變化且在控制臺進行了輸出，但是列表數據并沒有發生渲染。
代碼如下：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <button @click="pushDataToDataList">click me!</button>
  <ul>
    <li v-for="(item, i) in form.dataList" :key="item">
      {{ i + ":" + item }}
    </li>
  </ul>
</div>
<script>
  let app = new Vue({
    data: function() {
      return {
        form: {}
      }
    },
    methods: {
      pushDataToDataList() {
        if (this.form.dataList == null) {
          this.form.dataList = []
        }
        this.form.dataList.push("abc" + this.form.dataList.length)
        console.log(this.form.dataList)
      }
  }
  }).$mount('#app')
</script>

原因分析：

在查閱了官方文檔后我們發現下面這段話

由于 JavaScript 的限制，Vue 不能檢測數組和對象的變化。盡管如此我們還是有一些辦法來回避這些限制并保證它們的響應性。

1. 對于對象：Vue 無法檢測 property 的添加或移除。由于 Vue 會在初始化實例時對 property 執行 getter/setter 轉化，所以 property 必須在 data對象上存在才能讓 Vue 將它轉換為響應式的。

2. 對于數組：Vue 不能檢測以下數組的變動：

• 當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue

• 當你修改數組的長度時，例如：vm.items.length = newLength

原因到這里就明了了，我們的數據沒有進行渲染是因為在一開始，data下的form中就沒有dataList這個屬性，因此在后續即使該值產生了變化，Vue也就無法檢測到它的改變。而且不僅僅是對數組，即使是js對象也是一樣的。除此之外，直接按下標修改數組的元素，也不會觸發視圖渲染。
會觸發數組渲染的有以下數組方法：

• push(element) // 在數組末尾添加元素

• pop() // 刪除數組最后一個元素并將其返回

• shift() // 刪除數組第一個元素并將其返回

• unshift(ele1, ele2, …, eleN) // 向數組的開頭添加一個或更多元素，并返回新的長度

• splice(start, deleteCount?, …item) // 刪除數組中的元素并在該元素所在位置替換為新元素

• sort() // 對數組進行排序，會修改數組元素的位置

• reverse() // 倒轉數組元素，會修改數組元素的位置

解決方案：

1.在data下的form對象中，設置dataList屬性。由于前端在對數據進行處理時就知道代碼的結構是什么，提前設置好了也便于后續的開發理解。建議使用

data: function() {
  return {
    form: {
      dataList: null
    }
  }
}

2.使用this.$set()方法

pushDataToDataList() {
  if (this.form.dataList == null) {
    // 先在form下設置下dataList屬性
    this.$set(this.form, 'dataList', [])
  }
  this.form.dataList.push("abc" + this.form.dataList.length)
  console.log(this.form.dataList)
}

到此，相信大家對“怎么解決Vue綁定對象與數組變量更改后無法渲染的問題”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！