vue 對(duì)象添加或刪除成員時(shí)無(wú)法實(shí)時(shí)更新的解決方法
前陣子將項(xiàng)目搬上Vue的時(shí)候偶遇一個(gè)突發(fā)問題
當(dāng)對(duì)象添加或刪除成員時(shí)頁(yè)面無(wú)法實(shí)時(shí)更新渲染，但是數(shù)組是正常的
目測(cè)是ob沒有監(jiān)聽到對(duì)象的成員有變化
查看一些大家的求助回答是說(shuō)ob監(jiān)聽的是數(shù)組length的變動(dòng) 對(duì)象默認(rèn)沒有l(wèi)ength 新增成員時(shí)不會(huì)自增length
所以監(jiān)聽不到對(duì)象的變化 最近大腦過(guò)于疲憊 懶得看文檔了。。。
不多廢話 解決方式直接上代碼
在實(shí)例內(nèi)部可以用$set和$delete
this.$set(this.age,'age',18); this.$delete(this.age,'age');
也可以直接調(diào)用Vue的set和delete
let vm = new Vue({
el : '#app',
data : {
age:{}
}
});
Vue.set(vm.age,'age',18);
Vue.delete(vm.age,'age');
PS:vue給數(shù)組和對(duì)象進(jìn)行增加刪除字段不更新數(shù)據(jù)的解決方法 — Vue.set(object, key, value)
組件基本代碼：
<style lang="sass">
</style>
<template>
<div>
<div>
<div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
}
},
methods: {
ceshi(){
}
}
}
</script>
1.數(shù)組的增加，刪除(數(shù)組的push等方法排除)
</style>
<template>
<div>
<div>
<div>
<div v-for="item in items">
<span>{{ item }}</span>
</div>
<button @click="ceshi">anniu</button>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
items: [11,22],
obj: { a: 'aa', b: 'bb' }
}
},
methods: {
ceshi(){
this.items[2] = 33; // 這樣的寫法數(shù)據(jù)是無(wú)法重新渲染的
}
}
}
</script>
點(diǎn)擊按鈕操作ceshi事件前后，沒發(fā)生變化
解決方法：
就是利用數(shù)據(jù)的push方法是可以實(shí)現(xiàn)的
利用Vue.set方法
具體實(shí)現(xiàn)如下：
methods: {
ceshi(){
this.$set(this.items, 2, 33)
}
},
同理，如果items: [{a: ‘11'}] –> items: [{a: ‘11', b: ‘22'}]
<div v-for="item in items">
<span v-for="(i, j) in item">{{ i }}--{{ j }}</span>
</div>
this.items[0] = Object.assign({}, this.items[0], { b: '22' });
this.$set(this.items, 0, this.items[0]);
2.給對(duì)象增加新屬性（同理）
<template>
<div>
<div v-for="item in obj">
<span>{{ item }}</span>
</div>
</div>
</template>
data(){
return {
obj: { a: 'aa', b: 'bb' }
}
}
methods: {
ceshi(){
this.obj['c'] = '000'; // 不起作用
this.$set(this.obj, 'c', '000'); //起作用
}
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解使用element-ui table組件的篩選功能的一個(gè)小坑
在element ui 框架中，對(duì)于table框架，有一個(gè)篩選功能，這篇文章主要介紹了詳解使用element-ui table組件的篩選功能的一個(gè)小坑，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
tomcat部署前端vue項(xiàng)目步驟(項(xiàng)目上線具體操作)
在實(shí)際開發(fā)中,我們經(jīng)常會(huì)遇到將Vue項(xiàng)目部署到Tomcat服務(wù)器上的需求,下面這篇文章主要給大家介紹了關(guān)于tomcat部署前端vue項(xiàng)目(項(xiàng)目上線具體操作)的相關(guān)資料,需要的朋友可以參考下2024-07-07
今天遇到一個(gè)bug,有一個(gè)Element的message組件,用它做的一個(gè)進(jìn)度條,它是寫在一個(gè)頁(yè)面上,并且是用js控制dom元素的,web端一切正常,但是,H5頁(yè)面刷新的時(shí)候它樣式加載不出來(lái)了,所以本文主要介紹了Vue項(xiàng)目刷新后h5樣式失效的原因及解決方案,需要的朋友可以參考下2024-10-10
詳解Vue.js搭建路由報(bào)錯(cuò) router.map is not a function
這篇文章主要介紹了詳解Vue.js搭建路由報(bào)錯(cuò) router.map is not a function，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
Vue Element-ui實(shí)現(xiàn)樹形控件節(jié)點(diǎn)添加圖標(biāo)詳解
這篇文章主要為大家介紹了Element-ui實(shí)現(xiàn)樹形控件節(jié)點(diǎn)添加圖標(biāo)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
學(xué)過(guò)?vue2?的寶子們應(yīng)該都清楚，計(jì)算屬性這個(gè)東西在項(xiàng)目開發(fā)過(guò)程中使用的還是比較頻繁的，使用頻率相對(duì)來(lái)說(shuō)比較高。本文就來(lái)為大家介紹一下Vue3中計(jì)算屬性的用法，需要的可以參考一下2022-07-07
vue 父組件通過(guò)v-model接收子組件的值的代碼
這篇文章主要介紹了vue 父組件通過(guò)v-model接收子組件的值的代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法示例
這篇文章主要介紹了vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實(shí)例形式分析了vue.js使用data存儲(chǔ)數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了vue中環(huán)境變量的使用與配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue源碼學(xué)習(xí)記錄之手寫vm.$mount方法
在我們開發(fā)中，經(jīng)常要用到Vue.extend創(chuàng)建出Vue的子類來(lái)構(gòu)造函數(shù)，通過(guò)new 得到子類的實(shí)例，然后通過(guò)$mount掛載到節(jié)點(diǎn)，今天通過(guò)本文給大家講解手寫vm.$mount方法 ，感興趣的朋友一起看看吧2022-11-11