vue watch侦听属性，模糊检索功能，Vue.js中 watch(深度监听)的最易懂的解释

<el-form-item label="名称检索">
            <el-autocomplete
              v-model="formInline.name"
              size="small"
              :fetch-suggestions="querySearchAsync"
              @select="selectName"
              @focus="nameListMe"
              placeholder="请输入内容"
            ></el-autocomplete>
</el-form-item>
<el-form-item label="分组检索">
            <el-autocomplete
              v-model="formInline.group"
              size="small"
              :fetch-suggestions="querySearchGroup"
              @select="selectGroup"
              @focus="groupListMe"
              placeholder="请输入内容"
            ></el-autocomplete>
</el-form-item>

watch: {
    "formInline.name": {
      deep: true,
      handler: function(newVal, oldVal) {
        this.nameArr = []; //这是定义好的用于存放下拉提醒框中数据的数组
        var len = this.nameList.length; //nameList是页面初始化时得到的初始全部数据
        var arr = [];
        for (var i = 0; i < len; i++) {
          //根据输入框中的值进行模糊匹配
          if (this.nameList[i].name.indexOf(this.formInline.name) >= 0) {
            arr.push({
              value: this.nameList[i].name,
              id: this.nameList[i].id
            });
          }
        }
        this.nameArr = arr;
      }
    },
    "formInline.group": {
      deep: true,
      handler: function(newVal, oldVal) {
        this.groupArr = []; //这是定义好的用于存放下拉提醒框中数据的数组
        var len = this.groupList.length; //groupList
        var arr = [];
        for (var i = 0; i < len; i++) {
          //根据输入框中的值进行模糊匹配
          if (this.groupList[i].name.indexOf(this.formInline.group) >= 0) {
            arr.push({
              value: this.groupList[i].name,
              id: this.groupList[i].id
            });
          }
        }
        this.groupArr = arr;
      }
    }
  },
methods: {
  nameListMe() {
      this.$http
        .post(url, {
          name: this.formInline.name
        })
        .then(res => {
          if (res.data.success) {
            this.nameList = [];
            this.nameArr = [];
            this.nameList = res.data.data.result;
            for (let item of this.nameList) {
              this.nameArr.push({
                value: item.name,
                id: item.id
              });
            }
          } else {
            this.confirm(res);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    querySearchAsync(queryString, cb) {
      var nameArr = this.nameArr;
      cb(nameArr);
    }
}

获取焦点后，发送请求，获取所有数据，然后当输入某个值时，模糊检索

Vue.js中 watch(深度监听)的最易懂的解释

https://blog.csdn.net/qq_36688143/article/details/81287535