elementUI el-input el-date-picker手动置空value后无法输入

mengqudoh

于 2023-06-21 16:12:48 发布

阅读量670

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/mengqudoh/article/details/131329875

版权

文章描述了一个在使用ElementUI的el-input和el-date-picker组件时遇到的问题，即通过v-model绑定的对象手动置空value后，无法再进行输入。作者尝试了直接赋值null的方法，但导致Vue的双向绑定出现问题，输入无回显。为了解决这个问题，作者采用了Vue的$set方法来更新对象属性，成功实现了预期功能。

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

1.问题:elementUI el-input el-date-picker手动置空value后无法输入

例如:有一个对象通过v-model绑定了searchInputA1和searchInputB1

      customSearch1:{
        searchKey1:null,
        searchType1:null,
        searchInputA1:null,
        searchInputB1:null,
      }

刚开始我是这样置空的@change某一个空间触发methods方法:

    clearInputInfo(item,index){
      item[`searchInputA${index}`]=null;
      item[`searchInputB${index}`]=null;
    },

然后发现,再次在空间输入时无回显,需要再次点击其他组件操作才有反应,我猜想可能是影响了vue的双向绑定,

2.解决方案:

使用vue的$set方法进行对象的操作

    // 清除切换选择
    clearInputInfo(item,index){
      if (item[`searchInputA${index}`])
      this.$set(this[`customSearch${index}`],[`searchInputA${index}`],null);
      if (item[`searchInputB${index}`])
      this.$set(this[`customSearch${index}`],[`searchInputB${index}`],null);
    },