El-Select 下拉选择无反应 无法选择

场景: 已知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: “”}; //下拉选择才有反应

原理读源码可知:

下拉选择时会触发  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. s e t 在 d i a l o g . f o r m s . r o o m C o d e 已 存 在 的 时 候 , 会 直 接 返 回 ( 不 存 在 就 会 调 用 d e f i n e R e a c t i v e set在dialog.forms.roomCode已存在的时候,会直接返回(不存在就会调用defineReactive setdialog.forms.roomCode,(defineReactive$1(ob.value, key, val)去定义响应式的变量)

所以dialog.forms.roomCode虽然确实被改变了,但是不过它不是响应式的,所以视图没有更新

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值