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

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分支的选择器,基本上都会出现此类问题,推测有可能是因为页面渲染的时候,数据还没有加载,导致绑定失败

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值