vue 重塑數(shù)組之修改數(shù)組指定index的值操作
如下所示：
vm.items[indexOfItem] = newValue
vue不能檢測數(shù)組的變動
想要實(shí)現(xiàn)可以使用vue的set方法
this.$set(this.items,indexOfItem,newValue);
補(bǔ)充知識：vue中利用索引直接設(shè)置一個數(shù)組項，不能觸發(fā)視圖更新的問題
由于 JavaScript 的限制，Vue 不能檢測以下數(shù)組的變動：
1、當(dāng)你利用索引直接設(shè)置一個數(shù)組項時，例如：vm.items[indexOfItem] = newValue
2、當(dāng)你修改數(shù)組的長度時，例如：vm.items.length = newLength
舉個例子：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是響應(yīng)性的
vm.items.length = 2 // 不是響應(yīng)性的
為了解決第一類問題，以下兩種方式都可以實(shí)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果，同時也將在響應(yīng)式系統(tǒng)內(nèi)觸發(fā)狀態(tài)更新：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
你也可以使用 vm.$set 實(shí)例方法，該方法是全局方法 Vue.set 的一個別名：
vm.$set(vm.items, indexOfItem, newValue)
為了解決第二類問題，你可以使用 splice：
vm.items.splice(newLength)
以上這篇vue 重塑數(shù)組之修改數(shù)組指定index的值操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。這篇文章主要介紹了vue中使用sessionStorage記住密碼功能,需要的朋友可以參考下2018-07-07
利用Vue實(shí)現(xiàn)數(shù)字翻滾動畫效果展示
這篇文章主要介紹了利用Vue實(shí)現(xiàn)數(shù)字翻滾動畫效果,通過Vue的響應(yīng)式數(shù)據(jù)更新結(jié)合CSS3的動畫效果,我們可以實(shí)現(xiàn)非常酷炫的數(shù)字翻滾效果,給數(shù)據(jù)可視化帶來更多動感和吸引力,需要的朋友參考下吧2024-04-04
循環(huán)使用v-for指令,v-for指令需要以site in sites形式的特殊語法,sites是源數(shù)據(jù)數(shù)組并且site是數(shù)組元素迭代的別名,下面這篇文章主要給大家介紹了關(guān)于Vue中v-for列表循環(huán)的相關(guān)資料,需要的朋友可以參考下2022-11-11
在網(wǎng)上找了好久關(guān)于左右過渡動畫折疊的組件,沒有合適的代碼,效果類似于element UI中的Drawer抽屜組件,只不過ele中的都是懸浮的組件,工作中遇到的很多都是占用空間的展開折疊,網(wǎng)上很多也是上下展開收起的組件,于是就自己寫了一個,分享給大家,感興趣的朋友參考下吧2023-11-11
background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等屬性的縮寫,本文我用動態(tài)綁定background-image來舉例,感興趣的朋友跟隨小編一起看看吧2023-10-10
vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例
本篇文章主要介紹了vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了vue之多項目|多工程共用相同組件的思路，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue3(optionApi)使用Element Plus庫沒有效果的解決方式
這篇文章主要介紹了vue3(optionApi)使用Element Plus庫沒有效果的解決方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
前端vue中實(shí)現(xiàn)嵌入代碼編輯器的詳細(xì)代碼
隨著Web技術(shù)的不斷發(fā)展,前端開發(fā)也正日新月異,下面這篇文章主要給大家介紹了關(guān)于前端vue中實(shí)現(xiàn)嵌入代碼編輯器的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue-router 起步步驟詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03