欢迎光临
我们一直在努力

Vue.set方法保持数组视图实时更新

文章目录

简介

Vue开发会遇到一个问题,创建一个实例后,我们修改该实例中的数组的值,并不会触发视图更新,如:

<div id="app">
	<p v-for="item in items" v-once>{{item}}</p>
	<button @click="btn()">添加</button>
</div>

new Vue({
	el:'#app',
	data:{
		items:['a', 'b', 'c']
	},
	methods:{
		btn(){
			this.items[1] = 'd'
			console.log(this.items);
		}
	}
})

通过set()方法修改:

  • 参数1:要修改的对象
  • 参数2:key
  • 参数3:value
  • 返回值:已经修改好的值
var vm =new Vue({
	el:'#app',
	data:{
		items:['a', 'b', 'c']
	},
	methods:{
		btn(){
			Vue.set(this.items, 1, 'e')
			console.log(this.items)
		}
	}
})

事实上,在Vue中有三种方法可以改变数组中的数据:

  • 改变数组的引用
  • 通过Vue重写的7个方法
  • 通过set改变

实时改变对象中的数据则有两种方法

  • 通过改变对象的引用
  • 通过set方法
赞(0) 打赏
未经允许不得转载:散人研 » Vue.set方法保持数组视图实时更新
分享到: 更多 (0)

如果文章有不解或描述错误的地方,欢迎在评论区提问或指正!

评论 抢沙发

1 + 4 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏