VUE：为什么输入框无法输入内容？

一、问题

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

二、原因分析

代码如下：

<el-form :inline="true" label-width="100px">
      <el-form-item label="原药材名称：">
        <el-input v-model.trim="listQuery.mmName" clearable/>
      </el-form-item>
      <el-form-item label="原药材编号：">
        <el-input v-model.trim="listQuery.mmNo" clearable/>
      </el-form-item>
      <el-form-item label="种子批号：">
        <el-input v-model.trim="listQuery.seedBatchNo" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      </el-form-item>
    </el-form>

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
        }

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