Vue动态添加的data属性,无法驱动视图改变

最新推荐文章于 2024-03-02 11:59:50 发布
最新推荐文章于 2024-03-02 11:59:50 发布
阅读量315 收藏
点赞数
分类专栏： 自己平时入的坑Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weblys/article/details/108364910
版权

Vue-使用Vue.$set()给对象新增属性

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

在Vue初始化的时候会将所有data属性中的key,value进行添加getter和setter属性。

而实例化后通过业务逻辑动态追加的则不会添加这两个属性。

所以需要用到Vue.$set(obj,key,value)添加，即可绑定getter和setter属性。

同时数据发生改变，视图也会响应改变

// _this 指向 vue
const _this = this;
_this.$set(Obj, Key,Value)

 

小刘玩前端
关注
专栏目录
【前端知识之Vue】动态给Vue的data添加一个新的属性
weixin_44337386的博客
06-16 4068
本系列主要整理前端面试中需要掌握的知识点。本节介绍如何动态地给Vue的data添加一个新的属性。
VUE数据不能驱动视图？$set详细教程
JiAyInNnNnN123的博客
07-04 544
众所周知。VUE最大的优点就是数据驱动视图。当数据发生改变时，会监听到变化，后渲染到页面上。 那么为什么当我们在修改data中声明的数组或对象时。VUE并没有监听到变化呢？ 这个我也不知道。我们可以后续再进行补充。 没见过的来看看。见过的进来瞅瞅。 举一个例子~ 代码如下： <template> <div> <p>这是我定义的数组</p>...
Vue data 如何动态 添加属性 方式如下
weixin_44378370的博客
05-26 1160
vue现有的对象动态的添加属性： 例如有数据 ： data(){ return { userInfo:{ age:99 } } } 如果在函数或者计算属性中为userInfo添加name属性， 我们可能会 this.userInfo['name'] = 'hangzhou'; 这种方式添加的属性在页面中使用时，是无法被双向绑定的，也即是当该属性发生变化时，页面不会发生更新。 解决： 在首次定义该属性时使用this.$set();方法，即可将该属性添加到Vue的监听中。 thi
Vue 动态添加data属性
Lzyizq的博客
02-27 1947
Vue 动态添加data属性
5.Vue动态的给data添加一个新属性的问题
最新发布
qq_74217055的博客
03-02 776
上面的代码我我们的预期结果是点击一下button按钮，就给item对象添加一个新的属性，可是在控制台上确实输出了新属性，但是页面却不发生更新！这是为什么呢？
解决vue中对象属性改变视图不更新的问题
08-27
总之，当遇到Vue中对象属性改变而视图未更新的情况时，应避免直接修改对象属性，而是采用上述方法之一来确保Vue的响应式系统可以正常工作。这不仅能保证数据驱动视图的正确性，还能防止潜在的bug和意外行为。在开发...
vue2.0中set添加属性后视图不能更新的解决办法
12-09
这种情况通常发生在尝试给非响应式对象添加属性时，因为Vue无法追踪这些动态添加的属性。 首先，让我们深入理解Vue的响应式系统。Vue使用Object.defineProperty()对Vue实例的数据对象进行代理，以便在访问或修改...
vue 实现根据data中的属性值来设置不同的样式
11-19
在Vue.js中，动态地根据data中的属性值来设置元素的样式是常见的需求。这有助于实现界面的灵活性和响应性。下面将详细讲解如何利用Vue的特性实现这一功能，特别是结合三元运算符进行条件判断绑定内联样式。 首先，...
解决vue动态为数据添加新属性遇到的问题
10-18
然而，在实际开发过程中，有时我们需要动态地为Vue实例的数据对象添加新的属性，这时可能会遇到视图无法响应数据变化的问题。本文将深入探讨这个问题，并提供解决方案。 首先，我们需要理解Vue.js中的数据响应性...
Vue实现动态添加或者删除对象和对象数组的操作方法
10-17
总的来说，Vue 实现动态添加或删除对象和对象数组的关键在于理解数据驱动视图的原理，即通过修改 `data` 中的数组来更新视图。使用 `push`、`splice` 等数组方法，结合 Vue 的响应式系统，可以轻松实现这类功能。...
给对象新增属性视图不会随着更改
AnlanJion的博客
12-09 307
当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 问题出现的背景： 1：我需要做一个类似与多选框的效果 2：有一个all_list所有机型，后台会提供允许机型allow_list ，我需要根据允许机型来匹配页面选中的状态 3：想到的解决方法是，给对象添加新的 属性根据这个属性来判断状态 问题的出...
给vue的data动态添加新的属性详解（超详细）
常来常往，共同成长
12-29 2908
如果为对象添加少量的新属性，可以直接采用Vue.set()，如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象，如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议)
vue基础知识九：动态给vue的data添加一个新的属性时会发生什么？怎样解决？
Allen-Ye博客
09-12 572
动态给vue的data添加一个新的属性时会发生什么？怎样解决？
vue响应式对象
m0_68037920的博客
02-28 227
vue响应式对象
Vue-数据驱动视图（一）数据监听机制
秋水惊鸿的博客
05-08 1343
前言 Vue的一大特点就是数据双向绑定，当数据发生变化时，也可以同时触发界面的变化，即数据驱动视图。要想实现数据驱动视图，那么有这么几个步骤： 1.收集我们需要监听的数据，并给他配置个监听器，当数据状态发生变化时触发监听器，然后判断是否需要重新渲染； 2.数据变更时重新构建虚拟DOM； 3.虚拟DOM渲染成为真实的DOM； 在这里本文主要分析其中的第一步——数据监听机制，也就是Data变化到watcher监听到的这一过程。 正文 一、Object的数据响应机制 Vu...
2. 「vue@2.6.11 源码分析」数据驱动视图（响应式）
军火库
03-09 589
1.组件递归渲染 在这里的体现2.nextTick 单独小结补充，涉及到事件循环-渲染等较复杂的问题最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
动态给vue的data添加一个新的属性时会发生什么？怎样解决？
chenxiaoyu_927的博客
02-12 791
动态给vue的data添加一个新的属性时会发生什么？怎样解决？
向Vue data中数组对象动态添加属性值
m0_60067558的博客
08-18 833
无
Vue.js学习系列（十）---给页面增加动态数据
bwf_erg的博客
03-09 7996
前面的文章写的页面都是静态的，也就是说数据是固定不变的。在实际的应用中，需要请求外部数据以动态改变页面内容。对应有一个库叫 vue-resource 帮我们解决这个问题。 使用命令行安装 cnpm install vue-resource –save 在main.js引入并注册 vue-resource import VueResource from 'vue-resource' Vue
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值