好资源导航 » 文章资讯 » 使用Vue.set()方法实现响应式修改数组数据步骤

使用Vue.set()方法实现响应式修改数组数据步骤

2023-08-09 15:05:03 75

在页面中显示数组数据时发现了一个问题，当在methods方法中修改数组数据后，虽然数组已经发生改变，但是改变后的数据并没有渲染到页面上。这是因为在VUE中，如果在实例创建之后添加新的属性或者改变属性到实例上，它将不会触发视图更新。

而Vue.set()方法能够确保响应式对象被创建后仍然是响应式的，同时触发视图更新，动态响应数据的变化。

用法如下：

Vue.set(object,index,value)

object:要更改的数据源（数组或对象）

index：数据的索引（第几项）

value：修改后的值

实例





小五

{{item}}

该页面的考勤情况数据来源于一个数组，点击以后，考勤情况将会发生改变。

data(){
return{
id:1,
state:['未知','未知','未知','未知','未知','未知','未知','未知','未知']
}
},
methods:{
attence:function(num){
if(this.state[num]=='未知'){
Vue.set(this.state,num,'出勤');
}
elseif(this.state[num]=='出勤'){
Vue.set(this.state,num,'请假');
}
elseif(this.state[num]=='请假'){
Vue.set(this.state,num,'缺勤');
}
elseif(this.state[num]=='缺勤'){
Vue.set(this.state,num,'未知');
}
}
}

在这段代码中，数组中的数据初始值全都是未知，点击按钮以后，attence（）方法会根据传入的参数改变数组中的值，传入的参数是几就改变第几项的数据。页面将会及时对数据变化作出响应，渲染出来。

注：该方法也可用来增加数据，只需将第二项的索引值赋为数组的长度，第三项为增加的数据值。

以上这篇使用Vue.set()方法实现响应式修改数组数据步骤就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

使用Vue.set()方法实现响应式修改数组数据步骤

热门推荐

随机推荐