vue 数据修改，但是视图没有更新_vue中点击换页视图不显示,添加修改后视图不更新-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39930070/article/details/125079294

在Vue项目中遇到页面数据更新不生效的问题，原因在于Vue无法监听到对象新增属性的变化。解决方案包括：1) 初始化时确保数据对象包含time属性；2) 使用`this.$set()`添加属性；3) 添加属性后调用`this.$forceUpdate()`强制更新视图。通过这些方法可以确保页面数据与源数据同步。

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

项目中遇到过两次这样的事儿，一般都是在修改页面，

在created中赋值
this.form ={...this.data} //this.data 是通过 props 传进来的值  不包含 time
this.form.time.push(moment(this.form.startTime))
this.form.time.push(moment(this.form.endTime))

页面是这样

<a-range-picker :disabled="isPreview"  :show-time="{ format: 'YYYY-MM-DD HH:mm' }"
format="YYYY-MM-DD HH:mm" @change="onDateChange" v-model="form.time" width="100%"/>

首次赋值的时候是可以赋值成功的，但是当我点击清空或重新赋值的时候，虽然数据源的值改变了，但是页面上的值没有改变。

原因：

this.form.time 相当于初始化之后，

然后给这个对象添加了一个属性，vue 监听不到，所以页面上的值没有改变。

解决方式（以下任选其一即可）：

1.在初始化时确保有time属性,给data添加time属性，然后在赋值给form

this.data.time.push(this.data.startTime)
this.data.time.push(this.data.endTime)
this.form ={...this.toolMeeting}

2.对象添加属性时，使用this.$set(obj, key, value)

this.$set(obj, key, value)
this.$set(this.form,'time',[this.form.startTime,this.form.endTime])

3.添加完属性后，使用 this.$forceUpdate()

this.$forceUpdate();

参考链接岂梦-解决vue更新了对象数据，视图没有更新https://blog.youkuaiyun.com/qq_42338293/article/details/116961597 大雄Obear-Vue数据更新视图不更新的几种解决方案https://blog.youkuaiyun.com/bigbear00007/article/details/102594645