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=" 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 需要区分。不然无法进行匹配搜索