VUE 伪双向绑定失效数据延迟展示点别的才展示出来

NUZGNAW

已于 2024-05-21 11:12:34 修改

阅读量550

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2023-09-01 15:03:14 首次发布

文章描述了一个开发者在使用ElementUI的el-date-picker组件时遇到的问题，选择器无法实时渲染数据。尝试了多种方法如change方法、数据监听和处理Vue警告错误都无效。最后发现，问题出在v-if分支的选择器在数据未加载时绑定失败，解决方案是先序列化和反序列化数据后再逐个赋值。

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

1、某个选择器失效，点击后下拉框缩回，但数据没有被渲染上，控制台打印v-model绑定的数据却发现已经改变，在其他好用的选择器选择或者其他的输入框输入后，此选择器的值显示出来了

<el-date-picker v-model="relForm.startDate" :picker-options="pickerStart" placeholder="选择日期">
</el-date-picker>

2、尝试过的方案

（1）绑定@change方法，方法中强刷表单

this.$forceUpdate()

（2）对v-model绑定的值做监听，用$set刷新数据

（3）重新定义表单中没有或者为空的参数

（4）修改控制台中报的所有Vue Warn和Vue Error

3、以上方法均无效，后修改获取数据的方式，先对获取到的数据进行序列化和反序列化，然后通过循环从对象中一个个取出来再一个个写进去，能够解决此问题

let relForm = JSON.parse(JSON.stringify(res.data))
for (let i in relForm) {
    this.relForm[i] = relForm[i]
}

4、原因推测

经过调研，发现所有存在v-if分支的选择器，基本上都会出现此类问题，推测有可能是因为页面渲染的时候，数据还没有加载，导致绑定失败

VUE 伪双向绑定失效 数据延迟展示 点别的才展示出来