element-ui 的input模糊搜索 【動態渲染多個 互不干擾】

最近項目中頻繁使用element-ui的input模糊搜索， 因為是多條件的模糊搜索，按照官方文檔，轉化了數據類型傳入進去，但是還是偶爾時不時的報 “toLowerCase of undefined”。今天徹底將其弄好，需要對傳入的值進行判斷。然后發現又發現數據無法刷新，采用watch去監聽。

全部代碼如下：

<template>
  <el-autocomplete
    class="inline-input"
    v-model="state"
    :fetch-suggestions="querySearch"
    placeholder="請輸入內容"
    @select="handleSelect"
    style="width: 300px"
    @clear="clearInput"
    clearable
  ></el-autocomplete>
</template>

<script>
  export default {
    name: "inputSearch",
    props: {
      restaurants: {
        default: []
      },
      value: {
        default: ""
      },
    },
    data() {
      return {
        inputaData: [],
        state: "",
      }
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.inputaData;
        // console.log(restaurants,'restaurants');
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 調用 callback 返回建議列表的數據
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) =>{
          if (restaurant.pinyin){
            if(restaurant.pinyin.toLowerCase().indexOf(queryString.toLowerCase()) > -1){
              return true;
            }
          }
          if (restaurant.wubi) {
            if(restaurant.wubi.toLowerCase().indexOf(queryString.toLowerCase()) > -1){
              return true;
            }
          }
          if (restaurant.value) {
            if(restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1){
              return true;
            }
          }
          return false;
        };
      },
      handleSelect(item) {
        this.$emit("handleSelect",item)
      },
      clearInput(){
        this.$emit("clearInput")
      }
    },
    mounted() {
      setTimeout(() => {
        this.inputaData = this._props.restaurants;
        // console.log(this.inputaData,3333333333);
      }, 2000),
        setTimeout(() => {
          this.state = this._props.value;
        }, 2000)

    },
    watch: {
      restaurants: {
        handler(newValue, oldValue) {
          this.inputaData=newValue;
        },
        deep: true
      }
    }
  }
</script>

 如果不是抽取組件狀態下， 多個模糊搜索，

createFilter和cb 需要區分。不然無法進行匹配搜索