vue给数组和对象进行增加删除字段不更新数据的解决方法 — Vue.set(object, key, value)
关于为什么数据变动bu’chong不重新渲染, 官网已经介绍了, 这里就不再多说:下面主要记录一下具体的操作代码:组件基本代码:<style lang="sass"></style><template><div
·
关于为什么数据变动不重新渲染, 官网已经介绍了, 这里就不再多说:
下面主要记录一下如何利用Vue.set方法手动的触发Vue的渲染:
具体的操作代码如下:
组件基本代码:
<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'); //起作用
}
},
更多推荐
已为社区贡献7条内容
所有评论(0)