VUE2改变数组对象的方法($set)

需求:vue中数组或者对象的长度无法监听时,需要实时刷新数据
思路:通过$set方法实现数据监听

//改变数组
1.全局方法(不常用)
Vue.set(vm.items, indexOfItem, newValue)
//Vue.set(数组名字, 改变的索引位置, 需要更改的值)
// Vue.set(arr,1,'我想被改变')

2.使用vue实例上的$set方法
//改变数组
vm.$set(vm.items, indexOfItem, newValue)
//vm.$set(数组名字, 改变的索引位置, 需要更改的值)
//this.$set(arr,1,'我想要不要被改变')

//改变对象
方法一:Vue.set(vm.someObject, 'b', 2)
方法二:this.$set(this.someObject,'b',2)

若是使用$set数据还是没有实时刷新

//使用forceupdate来强制刷新数据
this.$forceupdate();
  • 15
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 在Vue中,可以使用Vue.set()或this.$set()来给data选项中的数组赋值。根据官方文档的写法,可以使用以下方式来操作数组并让页面重新渲染:Vue.set(vueInstance.$data.arr, 0, 3)或this.$set(vueInstance.$data.arr, 0, 3)。\[1\]这两种方式都可以实现相同的效果。其中,target参数是要操作的数组,propertyName/index参数是要修改的元素的索引或属性名,value参数是要赋给该元素的新值。\[2\]例如,如果要给data选项中的数组添加一个新的元素,可以使用以下代码:this.$set(this.person, "score", "60")。\[3\]这样就可以给对象添加一个属性并赋值。 #### 引用[.reference_title] - *1* [Vue.set()和this.$set()](https://blog.csdn.net/weixin_42169395/article/details/122193230)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue中this.$set修改数组,数据改变视图层不更新](https://blog.csdn.net/qq_38951259/article/details/122249151)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue中this.$set()的用法----更新数组对象的值](https://blog.csdn.net/m0_67391521/article/details/123304430)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值