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