前端通过Vue自己实现输入框模糊筛选数据，并将筛选结果展示

业务场景是后端返回数据，前端通过input输入框进行模糊筛选，并将筛选结果展示在下面

例如接口返回的数据为：
[{id:1, name:“课程1”}
{id:2, name:“课程2”}
{id:3, name:“续报”}]
input输入框输入: 续报
结果显示为： 续报

input输入框输入: 课程
结果显示为： 课程1 和 课程2

<el-input
          placeholder="请输入内容"
          v-model="input"
          @blur="validateCounts"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>

将目标数据进行渲染

<div
          class="content-item"
          v-for="(item, index) in recommendedOrders"
          :key="index"
        >{{item.name}}</div>

将接口数据进行遍历，对满足筛选条件的数据进行存储，然后在页面进行渲染

 validateCounts () {
 	  // 输入的内容
      let valueInput = this.input || ''
      // 存储筛选后的结果
      const temp = [];
      // 将接口数据进行遍历
      (this.recommendedOrdersBack || []).forEach((item) => {
     if(item.name.indexOf(valueInput) >= 0){
          temp.push(item)
       } 
      })
      // 将筛选结果的数据存储
      this.recommendedOrders = temp
    },