vue使用element ui的模糊输入组件el-autocomplete报错value如何解决？

Question

vue表单中使用el-autocomplete模糊输入组件，代码如下

<el-form-item>
    <el-autocomplete
       class="inline-input"
       v-model="alarmModel.alarmClass"
       :fetch-suggestions="querySearch"
       placeholder="请输入告警分类"
       :trigger-on-focus="false"
     />
 </el-form-item>

Js代码

export default {
 data: () => ({
    classList: [],
    alarmModel: {
      alarmClass: '',
      sourceValue: ''
    }
 }),
 created () {
    this.getClassList()
 },
 methods: {
    getClassList () {
      this.classList = [
        { value: 'CPU使用率1', label: 'CPU使用率1' },
        { value: 'CPU使用率2', label: 'CPU使用率2' },
        { value: '磁盘使用率1', label: '磁盘使用率1' },
        { value: '磁盘使用率2', label: '磁盘使用率2' },
        { value: '响应率异常', label: '响应率异常' }
      ]
    },
    // 联想输入
    querySearch (queryString, cb) {
      const alarmClassList = this.classList
      const results = queryString ? alarmClassList.filter(this.createFilter(queryString)) : alarmClassList
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (classList) => {
        return (classList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    }
  }

效果是正常显示，但是像这样点击选中时候和失去焦点的时候会出现value值得错误,请问这样如何解决这个value值的报错？

Answer 1

我今天遇到同样的问题，后来我将项目里element-ui更新到最新版本，2.13.2版本，就好了，没有报错