Vue中动态添加属性的方法，添加的属性视图中不更新（初学者容易踩坑）

飘走的落不离

于 2020-06-03 08:23:06 发布

阅读量788

点赞数

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/gebieren/article/details/106506041

版权

本文介绍了在Vue中动态添加属性时遇到的视图未更新的问题。当尝试通过对象直接添加属性，如`person.hobby`，虽然数据已改变，但视图并未响应。原因是Vue在初始化时仅监听声明过的data或computed属性。为解决此问题，文章推荐使用Vue的`set()`方法来确保属性被正确地响应式处理。同时，作者分享了在实际开发中的注意事项，并欢迎大家留言交流更多解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多时候在代码中通过添加已有对象的属性的时候，视图却无法更新，就像这样通过在add()方法中添加了一个hobby的属性

<div id="app">
			<button @click="add">添加属性</button>
			<br />
			<hr />
			<div class="init">
				{
  {person.name}} --{
  {person.age}}--{
  {person.hobby}}
			</div>
		</div>
		<script src="vue.js"></script>
		<script>
			const vm = new Vue({
				el: "#app",
				data: {
					person: {
						name: "rose",
						age: 18,
					},
				},
				methods: {
					add() {
						this.person.hobby = "dance";
					},
				},
			});
		</script>

结果页面无法展示，数据却存在，这个时候不知道问题出在哪里了。