前陣子將項目搬上Vue的時候偶遇一個突發問題
當對象添加或刪除成員時頁面無法實時更新渲染，但是數組是正常的
目測是ob沒有監聽到對象的成員有變化
查看一些大家的求助回答是說ob監聽的是數組length的變動 對象默認沒有length 新增成員時不會自增length
所以監聽不到對象的變化 最近大腦過于疲憊 懶得看文檔了。。。
不多廢話 解決方式直接上代碼
在實例內部可以用$set和$delete
this.$set(this.age,'age',18); this.$delete(this.age,'age');
也可以直接調用Vue的set和delete
let vm = new Vue({
el : '#app',
data : {
age:{}
}
});
Vue.set(vm.age,'age',18);
Vue.delete(vm.age,'age');
PS:vue給數組和對象進行增加刪除字段不更新數據的解決方法 — 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.數組的增加，刪除(數組的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; // 這樣的寫法數據是無法重新渲染的
}
}
}
</script>
點擊按鈕操作ceshi事件前后，沒發生變化
解決方法：
就是利用數據的push方法是可以實現的
利用Vue.set方法
具體實現如下：
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.給對象增加新屬性（同理）
<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'); //起作用
}
},
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
