Vue的data中物件新增屬性後,頁面卻不渲染(未渲染)

孙凯a發表於2024-06-07
前提背景:
在data中定義了一個陣列 usableList: [],給陣列中的每個物件新增checked屬性(用來檢視資料的勾選狀態)
問題:
勾選後,陣列的資料已經改變了,但是未渲染到頁面中
問題原因:
在於在Vue例項建立時,物件新增的屬性並未宣告,因此就沒有被Vue轉換為響應式的屬性,自然就不會觸發檢視的更新。
解決方法一:
使用Vue的全域性api $set()
Vue的data中物件新增屬性後,頁面卻不渲染(未渲染)
this.$set(item, 'saveMoney', f.saveMoney)
解決方法二:
先給附一個預設值
Vue的data中物件新增屬性後,頁面卻不渲染(未渲染)
_this.usableList = _this.usableList.map((item) => ({ ...item, checked: false }))
後續在該就可以渲染到頁面中了

相關文章