Vue中直接操作數(shù)組索引不奏效的問題解讀
Vue操作數(shù)組索引不奏效
1.案例
我們首先創(chuàng)造一個(gè)數(shù)組hobby并展示
data:{
hobby:["抽煙" , "喝酒" , "燙頭"]
}
<ul>
<li v-for="(item , index) in hobby">{{item}}</li>
</ul>
此時(shí)，我們?cè)诳刂婆_(tái)操作修改該數(shù)組
vm.hobby[0] = "運(yùn)動(dòng)"
會(huì)發(fā)現(xiàn)此時(shí)數(shù)組確實(shí)已經(jīng)修改，但頁面內(nèi)容并沒有改變
2.解釋
我們知道，Vue會(huì)對(duì)每一個(gè)data中的對(duì)象創(chuàng)建getter和setter方法，來實(shí)現(xiàn)響應(yīng)式
我們查看此數(shù)組，發(fā)現(xiàn)并沒有對(duì)每個(gè)數(shù)組元素的getter和setter方法的設(shè)置
此處為了方便理解，我們將該數(shù)組改為對(duì)象，對(duì)比一下
data: {
hobby: {
i1:"抽煙",
i2:"喝酒",
i3:"燙頭"
}
}
很明顯多了對(duì)于每一項(xiàng)的setter和getter方法的設(shè)置，這是響應(yīng)式的關(guān)鍵
3.如何操作數(shù)組
一.push、pop、shift、unshift、reverse、sort、splice等可以直接修改數(shù)組本身的方法，可以做到響應(yīng)式
vm.hobby.push('運(yùn)動(dòng)') //頁面實(shí)時(shí)更新了
二.使用Vue.set()方法
以上兩種方法都可以做到響應(yīng)式
4.深層原因
這里沿用上例。
此處調(diào)用的操作數(shù)組的方法push，其實(shí)已經(jīng)不是數(shù)組原型對(duì)象中的push了
Vue中存在的push，第一步先調(diào)用了Array原型對(duì)象的push，第二步重新解析模板，生成虛擬DOM
Vue 將被偵聽的數(shù)組的變更方法進(jìn)行了包裹，所以它們也將會(huì)觸發(fā)視圖更新。這些被包裹過的方法包括：
push()pop()shift()unshift()splice()sort()reverse()
以上為官方文檔。
多看看文檔總是會(huì)有收獲的
更新數(shù)組或?qū)ο蟛簧?/h2>
新增對(duì)象屬性不生效
<body>
<div id="root">
<button @click="updateInfo">更新學(xué)生信息</button>
<div>姓名：{{student.name}}</div>
<div>年齡：{{student.age}}</div>
<div>性別：{{student.gender}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data:{
student:{
name:"張三",
age:18
}
},
methods:{
updateInfo(){
this.student.gender = "男";
}
}
})
</script>
</body>
【問題描述】如上圖所示，this.student.gender = “男”，新增對(duì)象屬性不生效。
【解決方法】使用Vue.set(target,key,value)或者vm.$set(target,key,value)，如下圖所示。
以下四個(gè)寫法均可。
Vue.set(vm.student,“gender”,“男”) Vue.set(vm._data.student,“gender”,“男”) vm.$set(vm.student,“gender”,“男”) vm.$set(vm._data.student,“gender”,“男”)
所以，updateInfo函數(shù)可以改成這樣：
<body>
<div id="root">
<button @click="updateInfo">更新學(xué)生信息</button>
<div>姓名：{{student.name}}</div>
<div>年齡：{{student.age}}</div>
<div v-if="student.gender">性別：{{student.gender}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data:{
student:{
name:"張三",
age:18,
}
},
methods:{
updateInfo(){
// Vue.set(this.student,"gender","男");
this.$set(this.student,"gender","男");
}
}
})
</script>
</body>
更新數(shù)組元素不生效
<body>
<div id="root">
<button @click="updateInfo">更新馬某梅的信息</button>
<ul>
<li v-for="(p,index) of persons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.gender}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
persons:[
{id:"001",name:"周冬雨",age:18,gender:"女"},
{id:"002",name:"馬冬梅",age:19,gender:"女"},
{id:"003",name:"張桂梅",age:59,gender:"女"},
{id:"004",name:"周杰倫",age:30,gender:"男"}
]
},
methods:{
updateInfo(){
//更新 奏效
// this.persons[1].name = "馬鐵梅";
// this.persons[1].age = 25;
// this.persons[1].gender = "男";
//更新 不奏效
this.persons[1] = {
id:"002",
name:"馬鐵梅",
age:25,
gender:"男"
}
}
}
})
</script>
</body>
【問題描述】this.persons[1]={name:xxx,age:xxx,gender}，更新數(shù)組元素不生效。
【解決方法】有兩種解決方法：
使用方法splice更新數(shù)組，如下所示。
this.persons.splice(1,1,{
id:"002",
name:"馬鐵梅",
age:25,
gender:"男"
})
使用Vue.set(target,key,value)或者vm.$set(target,key,value)。
this.$set(this.persons,1,{
id:"002",
name:"馬鐵梅",
age:25,
gender:"男"
})
//或者
Vue.set(this.persons,1,{
id:"002",
name:"馬鐵梅",
age:25,
gender:"男"
})
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3.x項(xiàng)目開發(fā)的一些常用知識(shí)點(diǎn)總結(jié)
目前Vue3.0是會(huì)兼容大部分2.x的語法,下面這篇文章主要給大家介紹了關(guān)于Vue3.x項(xiàng)目開發(fā)的一些常用知識(shí)點(diǎn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要介紹了在Vue中實(shí)現(xiàn)添加全局store方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Luckysheet ，一款純前端類似excel的在線表格，功能強(qiáng)大、配置簡(jiǎn)單、完全開源，這篇文章主要介紹了Vue-Luckysheet的使用方法,需要的朋友可以參考下2022-08-08
這篇文章主要給大家介紹了關(guān)于通用vue組件化登錄頁面的相關(guān)資料,文中通過圖文以及實(shí)例代碼將解決的辦法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08
vue項(xiàng)目?jī)?yōu)雅實(shí)現(xiàn)自動(dòng)引入組件的方法詳解
在我們寫vue項(xiàng)目的時(shí)候,都會(huì)引入一些組件庫,有時(shí)候有可能還不止一個(gè)組件庫,那么如何優(yōu)雅的實(shí)現(xiàn)自動(dòng)引入組件呢,下面小編就來和大家詳細(xì)講講吧2023-09-09
這篇文章主要介紹了vue 之 css module的使用方法，css module目的為所有類名重新生成類名，有效避開了css權(quán)重和類名重復(fù)的問題，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12
vue實(shí)現(xiàn)可移動(dòng)的懸浮按鈕
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可移動(dòng)的懸浮按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要給大家介紹了關(guān)于vue設(shè)置頁面背景及背景圖片的相關(guān)資料,在Vue項(xiàng)目開發(fā)中我們經(jīng)常要向頁面中添加背景圖片,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
vue簡(jiǎn)單封裝axios插件和接口的統(tǒng)一管理操作示例
這篇文章主要介紹了vue簡(jiǎn)單封裝axios插件和接口的統(tǒng)一管理操作,結(jié)合具體實(shí)例形式分析了vue中axios插件安裝、配置及接口統(tǒng)一管理具體操作技巧,需要的朋友可以參考下2020-02-02
Vue中設(shè)置背景圖片和透明度的簡(jiǎn)單方法
在做項(xiàng)目的時(shí)候常需要設(shè)置背景圖片和透明度,下面這篇文章主要給大家介紹了關(guān)于Vue中設(shè)置背景圖片和透明度的簡(jiǎn)單方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01