一、問題

發現在搜尋框中無法輸入內容。

二、原因分析

程式碼如下：

<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
        }

具體為什麼會出現這種情況，還未可知。