vue简单实现模糊搜索

1：准备数据：

data () {
    return {
    //主要搜索的对象数组
      questionArrayList : {
        questionName : "",
        questionValue : ""
      },
      //搜索的文本框
      searchText : ""
    }
  },
  computed: { //设置计算属性

  }

2：解决过程：

      <div slot="extra">
        <a-radio-group>
        </a-radio-group>
        <a-input-search @search="searchQuestion" v-model="searchText" style="margin-left: 16px; width: 272px;" />
      </div>

v-model="searchText"绑定文本框的数据，进行获取。

      <div slot="extra">
        <a-radio-group>
        </a-radio-group>
        <a-input-search @search="searchQuestion" v-model="searchText" style="margin-left: 16px; width: 272px;" />
      </div>

@search="searchQuestion"绑定搜索事件，

search函数进行对我需要的问题对象数组进行操作。

searchQuestion() {
      if (!this.searchText) {

        return this.questionArrayList;
      }else{
        return this.questionArrayList.filter((value)=>{
          return value.questionName.includes(this.searchText)
        })
      }
    }

1：如果输入框为空，我返回原来的数组对象，即不操作，

2：如果输入框不为空，我进行过滤返回包含文本框的新的对象集合（原来的questionArrayList未改变。