Vue綁定對象與數(shù)組變量更改后無法渲染問題解決
項目場景:
在頁面顯示上有一個<ul>標簽,我們需要動態(tài)進行列表數(shù)據(jù)的展示,而由于我們的頁面上除了列表值,還有其他的值要進行展示,因此列表數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu)是某個對象下面的數(shù)組,在動態(tài)修改數(shù)據(jù)后發(fā)現(xiàn)沒有進行自動渲染。
問題描述:
在點擊按鈕“click me!”時雖然數(shù)據(jù)有變化且在控制臺進行了輸出,但是列表數(shù)據(jù)并沒有發(fā)生渲染。
代碼如下:
<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>
原因分析:
在查閱了官方文檔后我們發(fā)現(xiàn)下面這段話
由于 JavaScript 的限制,Vue 不能檢測數(shù)組和對象的變化。盡管如此我們還是有一些辦法來回避這些限制并保證它們的響應性。
- 對于對象:Vue 無法檢測 property 的添加或移除。由于 Vue 會在初始化實例時對 property 執(zhí)行 getter/setter 轉(zhuǎn)化,所以 property 必須在
data
對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應式的。- 對于數(shù)組:Vue 不能檢測以下數(shù)組的變動:
- 當你利用索引直接設(shè)置一個數(shù)組項時,例如:
vm.items[indexOfItem] = newValue
- 當你修改數(shù)組的長度時,例如:
vm.items.length = newLength
原因到這里就明了了,我們的數(shù)據(jù)沒有進行渲染是因為在一開始,data下的form中就沒有dataList
這個屬性,因此在后續(xù)即使該值產(chǎn)生了變化,Vue也就無法檢測到它的改變。而且不僅僅是對數(shù)組,即使是js對象也是一樣的。除此之外,直接按下標修改數(shù)組的元素,也不會觸發(fā)視圖渲染。
會觸發(fā)數(shù)組渲染的有以下數(shù)組方法:
- push(element) // 在數(shù)組末尾添加元素
- pop() // 刪除數(shù)組最后一個元素并將其返回
- shift() // 刪除數(shù)組第一個元素并將其返回
- unshift(ele1, ele2, …, eleN) // 向數(shù)組的開頭添加一個或更多元素,并返回新的長度
- splice(start, deleteCount?, …item) // 刪除數(shù)組中的元素并在該元素所在位置替換為新元素
- sort() // 對數(shù)組進行排序,會修改數(shù)組元素的位置
- reverse() // 倒轉(zhuǎn)數(shù)組元素,會修改數(shù)組元素的位置
解決方案:
1.在data下的form對象中,設(shè)置dataList
屬性。由于前端在對數(shù)據(jù)進行處理時就知道代碼的結(jié)構(gòu)是什么,提前設(shè)置好了也便于后續(xù)的開發(fā)理解。建議使用
data: function() { return { form: { dataList: null } } }
2.使用this.$set()方法
pushDataToDataList() { if (this.form.dataList == null) { // 先在form下設(shè)置下dataList屬性 this.$set(this.form, 'dataList', []) } this.form.dataList.push("abc" + this.form.dataList.length) console.log(this.form.dataList) }
參考鏈接
到此這篇關(guān)于Vue綁定對象與數(shù)組變量更改后無法渲染問題解決的文章就介紹到這了,更多相關(guān)Vue綁定對象與數(shù)組變量更改后無法渲染問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于vue中對window.openner的使用指南
opener屬性是一個可讀可寫的屬性,可返回對創(chuàng)建該窗口的Window對象的引用,下面這篇文章主要給大家介紹了關(guān)于vue中對window.openner使用的相關(guān)資料,需要的朋友可以參考下2022-11-11Vue3的ts報錯:類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法
這篇文章主要給大家介紹了關(guān)于Vue3的ts報錯:類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法,這是最近做項目中遇到的一個問題,這里給大家總結(jié)下解決辦法,需要的朋友可以參考下2023-08-08Vue3之Mixin的使用方式(全局,局部,setup內(nèi)部使用)
這篇文章主要介紹了Vue3之Mixin的使用方式(全局,局部,setup內(nèi)部使用),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10