VUE:为什么输入框无法输入内容?


一、问题

发现在搜索框中无法输入内容。

二、原因分析

代码如下:

"true" label-width="100px">
      "原药材名称:">
        "listQuery.mmName" clearable/>
      
      "原药材编号:">
        "listQuery.mmNo" clearable/>
      
      "种子批号:">
        "listQuery.seedBatchNo" clearable/>
      
      
        "primary" icon="el-icon-search" @click="getList">搜索
      
    

script

data() {
      return {
        listQuery: {
          page: 1,
          limit: 20,
          seedingId: null,
          type: "not"
        }
      };
    },

打开页面时执行的方法:

openDialog(seedingId) {
        this.dialogVisible = true;
        this.listQuery.seedingId = seedingId;
        this.listQuery.mmName = ''
        this.listQuery.mmNo = ''
        this.listQuery.seedBatchNo = ''
        this.getList();
      },

由于在openDialog方法中增加了如下代码:

this.listQuery.mmName = ''
        this.listQuery.mmNo = ''
        this.listQuery.seedBatchNo = ''

添加上面的代码,才导致无法输入内容。如果不输入上面的代码,则不会出现这个问题。

三、解决办法

在data修改如下:

listQuery: {
          page: 1,
          limit: 20,
          seedingId: null,
          type: "not",
          mmName: null,
          mmNo: null,
          seedBatchNo: null
        }

具体为什么会出现这种情况,还未可知。