vue 重塑數(shù)組之修改數(shù)組指定index的值操作
如下所示：
vm.items[indexOfItem] = newValue
vue不能檢測(cè)數(shù)組的變動(dòng)
想要實(shí)現(xiàn)可以使用vue的set方法
this.$set(this.items,indexOfItem,newValue);
補(bǔ)充知識(shí)：vue中利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)，不能觸發(fā)視圖更新的問題
由于 JavaScript 的限制，Vue 不能檢測(cè)以下數(shù)組的變動(dòng)：
1、當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
2、當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength
舉個(gè)例子：
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 相同的效果，同時(shí)也將在響應(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 的一個(gè)別名：
vm.$set(vm.items, indexOfItem, newValue)
為了解決第二類問題，你可以使用 splice：
vm.items.splice(newLength)
以上這篇vue 重塑數(shù)組之修改數(shù)組指定index的值操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何實(shí)現(xiàn)表單多選并且獲取其中的值
這篇文章主要介紹了vue如何實(shí)現(xiàn)表單多選并且獲取其中的值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue3中element-plus?icon圖標(biāo)的正確使用姿勢(shì)
element-plus官方提示,Icon圖標(biāo)正在向SVG?Icon遷移,之前使用的Font?Icon即將被棄用,下面這篇文章主要給大家介紹了關(guān)于vue3中element-plus?icon圖標(biāo)的正確使用姿勢(shì),需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Vue基本指令實(shí)例圖文講解，文章將基本指令講解的很清楚，有對(duì)于指令不太懂的同學(xué)可以跟著學(xué)習(xí)研究下2021-02-02
在vue中獲取token,并將token寫進(jìn)header的方法
今天小編就為大家分享一篇在vue中獲取token,并將token寫進(jìn)header的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue實(shí)現(xiàn)省市區(qū)級(jí)聯(lián)下拉選擇框
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)級(jí)聯(lián)下拉選擇框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue3框架使用報(bào)錯(cuò)以及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue-element的select下拉框賦值實(shí)例
這篇文章主要介紹了vue-element的select下拉框賦值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
下面小編就為大家分享一篇vue axios 表單提交上傳圖片的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue動(dòng)態(tài)禁用控件綁定disable的例子
今天小編就為大家分享一篇vue動(dòng)態(tài)禁用控件綁定disable的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue3實(shí)現(xiàn)CSS無限無縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)CSS無限無縫滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06