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

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值的报错?
image.png
image.png

阅读 7.1k
5 个回答

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

按照你的代码本地mock没有问题,你的这个提示报错,是不是一些引用错误或是节点容器还未生成就对其进行了初始化了

可以正常执行, 这页是否还有其他代码, 你展示一下大家帮你分析

image.png 这个应该访问不到吧

新手上路,请多包涵

还真是element版本问题。找半天都不知道那个value是哪儿的问题

推荐问题