使用computed实现过滤搜索

<template>
  <div class="allproject">
    <div class="allprojecthead">
      <span>所有项目</span>
    </div>
    <div class="searchinput">
      <input v-model="keyword" type="text" placeholder="请输入车辆的VIN码">
      <img src="../../../../assets/icon_search2_zhankai.png" alt="">
    </div>
    <div class="plist scroll">
      <div class="plistitem" @click="getactive(index)" :class="{active:active==index}" v-for="(item,index) in list2"
           :key="index">
        <div class="icon">
          <i></i>
        </div>
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>

import { dataAnalysisSubmit, projectList } from '../../../../api/api/user'

export default {
  name: 'xiangmu',
  components: {},
  props: {
    id2: {
      type: String,
      default () {
        return ''
      }
    },
    projectid: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      active: 0,
      list: [],
      id: '',
      keyword: ''
    }
  },
  computed: {
    // 计算属性的 getter
    list2: function () {
      // `this` 指向 vm 实例
      var that = this
      var list = that.list
      var list2 = []
      list.forEach((type) => {
        if (type.name.search(that.keyword) != -1) {
          list2.push(type)
        }
      })
      return list2
    }
  },
  watch: {},
  mounted () {
    this.getdata()
  },
  methods: {
    // 分析/sql/dataAnalysis/submit
    dataAnalysisSubmit () {
      var that = this
      dataAnalysisSubmit({
        projectId: that.projectid,
        startDate: that.startDate,
        taskName: that.taskName,
        fileName: that.fileName,
        file: that.file,
        endDate: that.endDate
      }).then(function (res) {
        that.list = res.data.list
      })
    },
    getactive (e) {
      this.active = e
      this.id = this.list[e].id
      this.$emit('getid', this.id)
    },
    getdata () {
      var that = this
      projectList().then(function (res) {
        that.list = res.data.list
        this.$emit('getfile', that.list[0].id)
      })
    }
  }
}
</script>