vue.js - 元素 UI 不显示来自 fetch-suggestion 的数据Vue.js

Question

我一直在从 el-select 远程搜索切换到远程搜索输入 el-autocomplete。我的问题是数据未显示在下拉列表中。

<el-autocomplete
v-model="searchValue"
:fetch-suggestions="getData"
placeholder="Type here"
loading="loadingCascade"
</el-autocomplete>

方法代码中的 VueJS

getData(searchString){
            if (searchString !== '') {
                this.loadingCascade = true

                setTimeout(() => {
                        this.$API.Public.getData(searchString)
                        .then(res => {
                            let result = res.data
                            let resSearchList = result.data
                            //Include search data
                            let arr = {id : searchString, name : searchString}
                            resSearchList.unshift(arr)

                            this.searchList = resSearchList.name
                            
                        })
                        .catch(err => {
                        })
                        .then(_ => {
                            this.loadingCascade = false
                        })
                    
                }, 500);
            }

        },

标签： vue.jselement-ui

Answer 1

方法必须有回调函数。更改getData()方法类似于：

getData(searchString, cb) {
  if (searchString !== '') {
    this.loadingCascade = true

    setTimeout(() => {
      this.$API.Public.getData(searchString)
        .then(res => {
          let result = res.data
          let resSearchList = result.data
          //Include search data
          let arr = {
            id: searchString,
            name: searchString
          }
          resSearchList.unshift(arr)

          this.searchList = resSearchList.name
          cb(this.searchList); // call callback function to return suggestions
        })
        .catch(err => {})
        .then(_ => {
          this.loadingCascade = false
        })

    }, 500);
  }

},

你可以看看这里的用法