在VueJs的object中添加新属性时，如何触发变更？
在Vue.js中，当我们向一个对象添加新属性时，Vue.js默认不会触发视图的更新。这是因为Vue.js在实例化时会将对象转换为响应式对象，只有在初始化时存在的属性才会被转换为响应式，后续添加的属性不会被自动转换。
为了解决这个问题，我们可以使用Vue.set方法或者直接使用赋值的方式来添加新属性并触发变更。
- 使用Vue.set方法：Vue.set(object, propertyName, value);
- object: 需要添加属性的对象。
- propertyName: 新属性的名称。
- value: 新属性的值。
示例代码：
Vue.set(this.object, 'newProperty', 'new value');
- 直接使用赋值的方式：this.object.newProperty = 'new value';注意：直接赋值的方式只适用于根级别的属性，如果需要添加嵌套属性，仍然需要使用Vue.set方法。
以上两种方式都会触发Vue.js的响应式系统，使新属性能够被Vue.js检测到并更新视图。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
相关·内容
1回答
在VueJs的object中添加新属性时，如何触发变更？
vue.js、vuejs2、vue-component、vuex、watch
我有以下vuex状态的初始结构(在VueJS项目中)： level1prop: null然后我动态地改变它，我把它变成下面的结构： level1prop} }然后，我将在level3prop下添加"customKeyN": { /* this is some object N */ }，对我来说，重要的是在每次更改时触发一
浏览 2提问于2018-07-19得票数 3
3回答
键在Vue中什么时候是有用的？
vue.js、vuejs2
即使在阅读完文档后，我仍然不太了解键的用法，但我知道这与保持每一项的唯一性有关。在使用v-for时，我只向最外层的父级(而不是v-for的子级)添加一个键。还有没有其他应该使用keys的情况？
浏览 1提问于2021-03-01得票数 1
1回答
TypeScript的Vue.js反应性和Object.defineProperty
typescript、vue.js、vuejs2、vue-reactivity
我在TypeScript中创建了一个类来处理表单提交和服务器错误： export default class Form<Model> { this.original = data
浏览 46提问于2019-07-03得票数 0
回答已采纳
2回答
类绑定的Vue.js怪异呈现
javascript、vue.js
基本上，我有一个带有v-for的html表，它循环在一个对象数组上，这里没有什么复杂的东西。当用户单击一行时，它会切换“链接”到给定行的对象的selected属性。现在，我还使用v-bind:class="{'active': n.selected}"设置了一个简单的类绑定，其中n是我的对象，但它不更新。现在更奇怪的是，我使用了vue-cli中的</e
浏览 13提问于2016-05-24得票数 1
回答已采纳
1回答
查看每个块的svelte组件对象属性，而不触发多个更改更新
svelte、svelte-3
我在理解Svelte中的变更检测是如何为封装在each块中的组件工作时遇到了一些问题。如果您想要查看组件上原语属性的更改，可以这样做：$: valueChanged(value);
function valueChanged(value) {console.log("value changed", value, "for object&quo
浏览 2提问于2020-10-09得票数 2
2回答
Vue -来自外部TypeScript类的动态属性不是反应性的
javascript、typescript、vue.js
property that was passed when instantiating the Form class }</script> 问题是:我在创建new Form ({...})实例期间传递给表单的字段是反应式的，因为当我通过调用this.form.$AddField()函数添加新字段时，这些字段不会变成反应式的。 有趣的是，Form类的construct调
浏览 26提问于2020-12-04得票数 2
2回答
用同样可以观察到的对象对Vue.set进行Vuex的变异，这是一个好做法吗？
javascript、vue.js、vuejs2、vuex
预期实现：最正确的方式修改存储在Vuex状态中的特定记录，只需一次大(批)写逻辑组件初始化并使用getter获取记录之一。它需要向记录中添加新属性并覆盖现有值。
问题是否可以修改Vuex getter返回的对象，然后将整个结果提交到状态？如果是的话，考虑到这将不得不覆盖Vuex的现有记录，最好的方法是什么。
浏览 3提问于2020-02-26得票数 1
回答已采纳
1回答
Vue2 -更新对象的方式与删除相同
vue.js、vuejs2
是否有一种与使用Vue.delete相同的方式更新属性？我有这样的方法： let url = '/admin/services/changePriorityStatus
浏览 3提问于2018-06-03得票数 0
回答已采纳
1回答
Liquibase不使用MySQL回滚失败的更改集
mysql、liquibase
我在MySQL56中使用Liquibase 3.4.1，并通过Spring运行Liquibase。当我在选择中犯了一个错误时，变更集失败了，迁移在那个变更集中停止了。然而，新列被提交到数据库中，但是没有适当的
浏览 4提问于2015-10-27得票数 7
回答已采纳
1回答
Vue.js的JSON和v-if问题
vue.js
在下面的示例中，v-if相关的div似乎都不是在单击Add按钮之前或之后呈现的。似乎在更新pizzas对象时，Vue.js没有运行任何更新。 }, return Ob
浏览 1提问于2018-01-30得票数 2
回答已采纳
3回答
liquibase可以处理部分更新的模式吗？
maven、database-schema、liquibase
我最近开始在一个分支上工作，这个分支是由一个离开组织的开发人员开发的，看起来他把相关的测试环境模式留在了一个糟糕的状态。有一个Liquibase更改文件，它进行了一些代码运行所必需的更改，但看起来关联的模式应用了一些更改。我得到的错误是：
错误:执行SQL ALTER TABLE limit ADD id serial时出错:错误:关系" limit“的列" id”已存在序列:执行SQL ALTE
浏览 0提问于2012-12-13得票数 0
1回答
更新旧的变更集- Liquibase
database-migration、liquibase
最初，我们从Postgres开始，并使用特定于Postgres的列的数据类型创建了变更集。
例如，我们有一个用'JSON‘类型的字段创建表的变更集。现在，我们想要移动到其他数据库。因此，当我们对另一个数据库运行变更集时，它无法创建表。我尝试添加'failOnError=false‘。但是，后来的更改集失败了，因为表不存在。您能建议一下如何重构旧的变更</
浏览 3提问于2017-07-26得票数 1
回答已采纳
2回答
VueJS :手动触发对观察到的对象/数组的更新
vue.js、observer-pattern
我创建了一个用于数据反应性的vue对象： data () { myData: {} }, myData (value) { }})
当我将/编辑/删除推到vm.myData中时，一切正常，观察者给我发送我能为这个调用观察者的内部方法吗？
浏览 0提问于2018-02-26得票数 9
回答已采纳
2回答
传递到视图为Vuejs2的JSON列
json、laravel、multidimensional-array、vuejs2、mutators
我正在通过ajax/ axiom将Laravel的数据集传递给vuejs2组件，并将其很好地呈现出来。但是，模型中有一个JSON列，它存储了一个有效的json对象，数据看起来可能是这样的：{'key':'value'}，值得注意的是，我在Laravel控制器等方面没有出现问题，这要感谢模型上的Mutator( protected $casts = [ 'the_json_column' =>
浏览 2提问于2018-03-02得票数 3
回答已采纳
1回答
Vuejs从ASP.NET核心应用程序中访问/公开对象
vue.js、asp.net-core、vuex
我正在寻找一种解决方案，将服务器对象公开给我的Vuejs前端，将其存储在我的Vuex商店中，这样我就可以在我的应用程序中的任何地方访问它们。我想在启动时公开一个包含这些属性的</em
浏览 0提问于2019-08-30得票数 1
回答已采纳
1回答
如何为下拉菜单在VueJS中外部触发反应性
vue.js、vue-reactivity
在这种情况下，我需要从外部VueJS触发VueJS管理的组件中的更改。我发现我可以通过触发或调用其click()属性在复选框上轻松地完成这一任务，但是我不能对input[type=text]或select元素执行相同的操作。摇摆不定的是
我看过关于反应性如何工作的VueJS文档，但不知道如何在这里实现它。我该怎么做？
浏览 3提问于2018-05-30得票数 2
回答已采纳
3回答
在什么情况下，Arra.观察者的“添加”事件触发器？
javascript、arrays
哪些方法会导致add类型的更改事件？在我看来，推动一个单一的价值是最有可能的情况。
浏览 3提问于2015-03-26得票数 9
回答已采纳
3回答
Vue JS -将Json放在数据上
javascript、json、vue.js
我想把我的JSON数据放到Vue数据中，还有一个显示器，为什么我不能开始工作？
浏览 0提问于2015-01-03得票数 2
1回答
具有自引用的jhipster JPA实体
jpa、jhipster、self-reference
我正在尝试jhipster，我想知道如何在一个实体中定义一个自我引用。类似于：“主题”有一个字段，该字段将自己称为父母或子女。通过发电机，我看不出有可能这样做。这就是为什么我自己创建了一个主题实体，并在实体中添加了一个字段，然而，实体中的变化似乎没有被清算人所接受。读取文档--似乎解析了来自jhipster的topic.json文件--但是，这不支持自引用。所以我被困在这里了。谢谢你，斯文
浏览 2提问于2015-08-31得票数 1
回答已采纳
2回答
VueJS动态属性名不更新值
javascript、vuejs2、vue.js
我试图实现一个相关联的数组，并结合访问该值中的属性，键基于活动对象的值。在VueJS 1中尝试执行此操作时，也会发生类似的情况，两次都不会引发任何错误。
浏览 1提问于2017-02-06得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
