vue數(shù)組雙向綁定問題及$set用法說明
vue數(shù)組雙向綁定問題及$set用法
在vue開發(fā)中,我們有時會遇到數(shù)據(jù)更新視圖不更新問題,地址沒有改變,vue就監(jiān)測不到數(shù)據(jù)變化。這個時候,雙向綁定就失效了。
以下這幾種情況,Vue都會檢測不到數(shù)據(jù)的變化
當你利用索引直接設置一個數(shù)組項時,例如:vm.items[indexOfItem] = newValue
當你修改數(shù)組的長度時,例如:vm.items.length = newLength
由于 JavaScript 的限制,Vue不能檢測對象屬性的添加或刪除
數(shù)組實現(xiàn)響應式的七個方法
push()
可向數(shù)組的末尾添加一個或多個元素,并返回新的長度pop()
從數(shù)組的尾部刪除一個元素,返回刪除的元素unshift()
向數(shù)組的前面添加元素,返回值:數(shù)組的新長度shift()
從數(shù)組頭部刪除一個元素,返回刪除的元素splice()
刪除:兩個參數(shù),splice(index,num) 刪除的第一項的位置以及要刪除的項數(shù)
添加:三個參數(shù),插入起始位置、刪除的項數(shù)(為0)、插入的項,向指定位置插入任意數(shù)量的項。arr.splice(1,0,"or","ue")
替換:先刪除再添加,三個參數(shù):起始位置、刪除的項數(shù)、要添加的項數(shù)。添加的與刪除的數(shù)量不一定要一致。arr.splice(1,2,"or","ue")
sort()
對數(shù)組元素進行排序,默認根據(jù)字符串Unicode碼進行排序,對數(shù)字進行排序時參數(shù)要傳遞一個比較函數(shù)。
?? ?sortNumber(a,b){ ?? ? ? ? ?return a-b ?? ?};
reverse()
該方法用于顛倒數(shù)組中元素的順序
上面的方法把原數(shù)組更改掉,可以選用這些方法來實現(xiàn)響應式。
flter()、concat() 和 slice()。它們不會變更原始數(shù)組,而總是返回一個新數(shù)組。使用這些方法會造成數(shù)據(jù)雙向綁定失效。
filter()
創(chuàng)建一個新的數(shù)組,新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。concat()
用于連接兩個或多個數(shù)組。該方法不會改變現(xiàn)有的數(shù)組.slice()
可從已有的數(shù)組中返回選定的元素,選擇從給定的 start 參數(shù)開始的元素,并在給定的 end 參數(shù)處結束,但不包括。該方法并不會修改數(shù)組,而是返回一個子數(shù)組.
$set用法
當數(shù)據(jù)沒有被雙向綁定的時候,我們可以使用$set
this.$set(原數(shù)組, 索引值, 需要賦的值)
vue中$set解決數(shù)據(jù)雙向綁定
由于 JavaScript 的限制,Vue 不能檢測以下變動的數(shù)組:
當你利用索引直接設置一個項時,例如:vm.items[indexOfItem] = newValue
解決:用$set方法
當你修改數(shù)組的長度時,例如:vm.items.length = newLength
解決:vm.items.splice(newLength)
this.$set(Object, key, value) //this.$set(this.list[i],"flag",true)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例
本文主要介紹了Vue基于路由監(jiān)聽實現(xiàn)同頁面動態(tài)加載的示例,重點在于切換路由的時候,重新拉取列表數(shù)據(jù),接下來看看實現(xiàn)方法吧2021-05-05Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯詳解
el-tree-select組件是el-tree和el-select的結合體,他們的原始屬性未被更改,下面這篇文章主要給大家介紹了關于Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯的相關資料,需要的朋友可以參考下2022-11-11解決VUE自定義拖拽指令時 onmouseup 與 click事件沖突問題
這篇文章主要介紹了解決VUE自定義拖拽指令時 onmouseup 與 click事件沖突問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue(定時器)解決mounted不能獲取到data中的數(shù)據(jù)問題
這篇文章主要介紹了Vue(定時器)解決mounted不能獲取到data中的數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vite+ts vite.config.ts使用path報錯問題及解決
這篇文章主要介紹了vite+ts vite.config.ts使用path報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue中使用[provide/inject]實現(xiàn)頁面reload的方法
這篇文章主要介紹了在vue中使用[provide/inject]實現(xiàn)頁面reload的方法,文中給大家提到了在vue中實現(xiàn)頁面刷新不同的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09vue-element換膚所有主題色和基礎色均可實現(xiàn)自主配置
這篇文章主要介紹了vue-element換膚所有主題色和基礎色均可實現(xiàn)自主配置,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04