vue实现模糊查询搜索

       <bz-input
        size="small"
        class="search"
        v-model="value"
        placeholder="请输入关键字搜索"
      >
        <template v-slot:left-icon>
          <img class="icon" src="../../assets/img/综合查询/搜索.png" alt="" />
        </template>
      </bz-input>


  //存储初始值
 localStorage.setItem("fydataInfo", JSON.stringify(this.dataInfo));

 watch: {
    // 模糊查询搜索
    value(newVal, oldVal) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      console.log(newVal, oldVal);
      if (newVal == "") {
        // 取值
        let add = localStorage.getItem("fydataInfo");
        console.log(JSON.parse(add));
        if (newVal == "") {
          this.dataInfo = JSON.parse(add);
        }
      } else {
       // 用于模糊查询
        this.timer = setTimeout(() => {
          const result = [];
          this.dataInfo.filter(item =>{
            if(item.name.indexOf(newVal) !== -1){
              result.push(item)
            }
          })
          console.log(result);
          this.dataInfo = result;
        }, 100);
      }
    },
  },