请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

为什么在watch里面修改data的值,cube的input无法进行同步

template

<cube-input v-model="v" ></cube-input>


data () {
return {
v: ''
}
},
watch: {
v (v) {
this.v = 'zzz'
}
},

包括vux里面也是会出现这种情况

https://github.com/airyland/vux/issues/2622


即。在input中输入内容后并且强行改变内容,父组件中的data会改变,子组件的props中的value会改变,但是子组件input中inputValue不会改变。导致显示内容不改变

正在回答

1回答

因为父组件的 watcher 是先执行的,并且 user watcher 是高于 render watcher 的,而子组件(cube-input)的 watcher 去监听 value 的变化,而这个 prop 的变化是在父组件 re render 之后。所以当你第一次在 input 输入内容后,v 发生了变化为你输入的内容,然后你又在父组件的 user watcher 中把 v 改成了 zzz,所以传递给 cube-input 的 value 就是 zzz,之后你再去输入 input,还经历上述过程,传递的 prop 还是 zzz,zzz -> zzz 没有变化,所以不会触发子组件的 watcher 回调, inpuntValue 就不会发生变化。

如果想更新,就在 nextTick 后修改 this.z 即可

0 回复 有任何疑惑可以回复我~
  • 提问者 李行知 #1
    非常感谢!原来如此,就是说其原因是因为props的内容么有改变所以导致未update。感谢老师
    回复 有任何疑惑可以回复我~ 2018-08-08 17:19:54
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信