场景: 已知El-Select的v-model='dialog.forms.roomCode'
原因: 你在手动触发改变之前,使用了 dialog.forms.roomCode = xxx; 给v-model赋值
解决办法1:
this.$set(this.dialog.forms,'roomCode ',xxx);
解决办法2:
this.dialog.forms ={ roomCode: ""}; //下拉选择才有反应
解决方法3:
@change="(val) => {
$forceUpdate(); //强制更新
}
"
原理读源码可知:
下拉选择时会触发 this.$emit('input', value); 进而触发ast生成的代码:
callback: function($$v) { _vm.$set(_vm.dialog.forms, "roomCode", $$v)},
为什么会触发callback?
因为渲染时 createComponent方法 -> 判断是v-model的话会触发transformModel->
执行on[event] = data.model.callback 'input'事件的接受器就是callback
而'之前运行了 dialog.forms.roomCode = ''; '它不是响应式的!!!!!!!!
而 _vm.$set在dialog.forms.roomCode已存在的时候,会直接返回(不存在就会调用defineReactive$$1(ob.value, key, val)去定义响应式的变量)
所以dialog.forms.roomCode虽然确实被改变了,但是不过它不是响应式的,所以视图没有更新
El-Select 下拉选择无反应 无法选择 Vue设置属性不触发响应
于 2020-10-22 18:23:17 首次发布
本文讲述了在Vue中使用v-model时,手动赋值导致视图不更新的问题,介绍了三种解决方法:$set方法确保响应性,清空对象属性使下拉选择生效,以及使用change事件触发视图更新。原理涉及Vue响应式原理和组件更新机制。
2552

被折叠的 条评论
为什么被折叠?



