Vue this.$set(this.parentBean, ‘children‘, []) 无效

最新推荐文章于 2023-12-04 17:13:06 发布
最新推荐文章于 2023-12-04 17:13:06 发布
阅读量1.2k 收藏
点赞数
分类专栏： VUE 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012174809/article/details/121946603
版权

是因为这个对象已存在children Vue没有做这种响应式的处理

所以

先

  delete this.clickOrBean.children

再

this.$set(this.parentBean, 'children', []) 

如花菇凉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件通信05-父子组件通信（子到父）-$parent
caoxinjian423的博客
10-08 471
App.vue <template> <div id="app"> <Parent></Parent> </div> </template> <script> import Parent from './components/Parent' export default { name: 'App', components: { Parent } } </script>
vue中 this.$set的用法详解
10-16
主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue中this.$set无效问题
ddd
03-10 6019
vue.set/this.set无效的解决方案
Vue.$set 失效，vue字段不更新
mudarn的博客
07-31 1146
（1）删除原有的值 Vue.delete(vm.template, 'template_id'); Vue.delete(vm.template, 'template'); （2）赋新的值 Vue.set(vm.template,'template_id', template_id); Vue.set(vm.template,'template', template_value); Vue.set可以用vm.$set替代 ...
this.$set()，new Map（）的用法，ref 的用法，this.$children，this.$parent
丁贵龙学习技术的博客
10-21 593
this.$set()用法 this.$set()，new Map（）的用法，ref 的用法，this.$children，this.$parent
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
在这个例子中，`$.ajax`的`success`回调函数中的`this`并没有指向Vue实例，而是指向了回调函数本身，因此无法调用`this.$set`。 ### 报错原因 在JavaScript中，函数内部的`this`值取决于函数的调用方式。在上述...
Vue中的this.$options.data()和this.$data用法说明
10-15
在Vue.js框架中，`this.$options` 和 `this.$data` 是两个非常重要的属性，它们分别用于获取组件的配置选项和当前实例的数据对象。在开发过程中，正确理解和使用这两个属性对于管理组件的状态至关重要。 首先，`...
解决vue.js this.$router.push无效的问题
10-18
今天小编就为大家分享一篇解决vue.js this.$router.push无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）
10-18
主要介绍了解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等），解决方法是使用this.$forceUpdate()强制刷新，文章给大家分享了代码案例，需要的朋友参考下吧
this.$children、this.$refs、this.$parent、this.$root
weixin_43939111的博客
04-28 5816
一、当需要拿到所有子组件的时候才会通过this.$children，返回的是一个存放所有子组件的数组，一般很少用，除非你的组件顺序变化不大且能清楚记住子组件的位置 this.$children[3].username //获取第四个子组件的data里的username数据 二、this.$ refs，给组件绑定ref属性，相当于html获取dom元素，this.$ refs返回的是一个对象 this.$refs.titleCpn.aaa //获取titleCpn组件中的aaa数据 ...
vue2.0中set添加属性后视图不能更新的解决办法
12-09
今天在工作中遇到一个问题，郁闷了很久，特地写一篇博客记录一下，方便以后再遇到可以查找，也分享个各位小伙伴，在网上查找很多资料说用Vue.$set设置属性后视图也会更新，但是真相并不是这样，通过等于号赋值和$set方法我都试了，前台属性值改变但是视图并没有改变，下面上图： 我需要做的就是下面的Email和Fax属性的值从第一排的输入框用户输入获取，但是输入过后下面的文本框的值并为发生变化，在浏览器console却发现值已经改变了，这让我很郁闷，网上搜了一堆答案都没有解决，后面查看vue官网有个delete方法，如果我先把这个属性delete再重新set是否可以，如图： 　　　　　　　　　　　
uniapp props、$ref、$emit、$parent、$child、$on、$set 是什么？
专注基础架构领域
06-05 4964
举个例子来解释一下何为父组件，何为子组件？ index.vue导入sunui-cell组件的时候，我们就称index.vue为父组件依次类推，在vue中只要能获取到组件的实例，那么就可以调用组件的属性或是方法进行操作 ...
使用this.$set无效，不更新视图
周凤伟的博客
06-09 6628
使用this.$set无效，不更新视图
【Vue进阶】双向绑定视图不更新，$set()失效的解决方法
  ╭じò ぴé╮。Qi
08-26 2674
在开发的过程中，我们经常遇到数据更新后，而视图不更新的情况，有的使用`this.$set()`就能解决，然而有的即使用了`this.$set()`视图也不更新。特此记录下处理“**数据更新后而视图不更新**”问题的解决方法。
vue2 this.$set 不起作用问题。
最新发布
m0_65730686的博客
12-04 631
'收起' :'回复' }} =={{ item.replyObj.length }} =={{ item.flag }}// 因为第一次key已经存在，来回切换的话需要先删除在重新设置。
Vue使用$set失效
wsj8848的博客
05-24 930
vue中使用$set失效
vue computed的set方法无效怎么办？
hua_ban_yu的博客
05-10 1万+
vue可以通过set方法将data里面的原始数据改掉，但是为啥监控发现并没有变化，而且set和get打个对调，get输出的值还是不变。原因：默认情况下computed的set方法是不会被执行，只有对重新赋值才会触发computed的set方法。解决方法：只需要对app.fullName进行赋值即可步骤：通过get、set方法对fullName进行赋值，同时在对应的get、set方法里使用conso...
Vue中的$set的使用
热门推荐
大灰狼的小绵羊哥哥的博客
06-02 4万+
在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。如下代码： html> head> meta charset="utf-8"> title>vue $settitle> script src="http
Vue this.$set
08-16
在Vue中，`this.$set`是一个实例方法，用于在响应式对象上设置新的属性或修改已有的属性，并确保这些属性也是响应式的。 通常情况下，当你在Vue实例或组件的`data`选项中声明一个属性时，Vue会将其转化为响应式属性，这意味着当属性的值发生变化时，相关的视图会自动更新。然而，对于已经创建的对象，Vue无法追踪属性的添加或修改。这时，就需要使用`this.$set`方法来达到响应式更新的效果。 使用方法如下： ```javascript this.$set(object, key, value) ``` - `object`：要添加或修改属性的对象。 - `key`：要添加或修改的属性名。 - `value`：要设置的属性值。 下面是一个示例： ```javascript var app = new Vue({ data: { myObject: {} }, mounted: function () { this.$set(this.myObject, 'name', 'John'); this.$set(this.myObject, 'age', 25); } }); ``` 在上面的示例中，我们在Vue实例中的`data`选项中定义了一个空对象`myObject`。然后，在组件的`mounted`生命周期钩子中使用`this.$set`方法向`myObject`对象添加了两个属性：`name`和`age`。由于使用了`this.$set`方法，这两个属性也会成为响应式属性。 需要注意的是，如果要修改数组的某个元素，也需要使用`this.$set`方法。Vue无法检测到通过索引修改数组元素的变化。例如： ```javascript var app = new Vue({ data: { myArray: ['a', 'b', 'c'] }, methods: { updateArray: function (index, newValue) { this.$set(this.myArray, index, newValue); } } }); ``` 在上面的示例中，我们定义了一个`updateArray`方法，用于修改`myArray`数组中指定索引的元素。通过使用`this.$set`方法，可以确保修改后的数组元素是响应式的。 希望这个解答对你有所帮助！如果你还有其他关于Vue的问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值