javascript - 使用计算的属性向Vue.js表添加过滤器(Adding a filter to Vue.js table using computed properties)

Question

I have a table generated using an array of objects.

(我有一个使用对象数组生成的表。)

I am having a hard time figuring out how to use computed properties to filter the array of objects.

(我很难弄清楚如何使用计算属性来过滤对象数组。)

I am using VuE.js.

(我正在使用VuE.js。)

I'm not sure how to properly use the filter() in my computed properties to filter the table.

(我不确定如何在计算属性中正确使用filter（）来过滤表。)

new Vue({
  el:"#app",
  data: () => ({
    search:'',
    programs: [],
    editableKeys: ['date', 'company', 'funding', 'funded', 'recruit', 'program'],
  }),
  created () {
    this.getPrograms();
  },
  methods: {
    getPrograms() {
     axios.get("https://my-json-server.typicode.com/isogunro/jsondb/Programs").then(response => {
       this.programs = response.data.map(program => ({
           ...program,
           isReadOnly: true,
            dropDowns: ["Apple","Google"]
       }));
      }).catch(error => {
       console.log(error);
      });
    },
    editItem (program) {
      program.isReadOnly = false
    },
    saveItem (program) {
      program.isReadOnly = true
      console.log(program)
      alert("New Value: "+program.company)
      alert("Previous Value: "+program.company)
    },
    bgColor (program) {
      return program.funded === program.funding ? 'yellow' : 'white'
    },
    formatDate(program){
      var formatL = moment.localeData().longDateFormat('L');
      var format2digitYear = formatL.replace(/YYYY/g,'YY');
      return moment(program.Date).format(format2digitYear);
    },
    updateField(program){
      console.log(program)
      alert(program)
    }
  },
  computed: {
    searchContents(){
      this.programs.filter(this.search === )//??? not sure how to filter correctly
    }
  }
})

Here's the pen

(这是笔)

  ask by OLA translate from so

Answer 1

Computed properties have to return a value, and you can use it as same as data and props.

(计算属性必须返回一个值，您可以将其与数据和道具一样使用。)

So what you need to do is return the result of the filter.

(因此，您需要做的是返回过滤器的结果。)

For the case with no search option, you can return raw programs without the filter.

(对于没有search选项的情况，您可以返回不带过滤器的原始programs 。)

The computed property will be like this: (if you filter the programs by it's funding attribute.)

(计算出的属性将如下所示：（如果funding属性过滤程序）。)

computed: {
  searchContents(){
    if (this.search === '') {
      return this.programs
    }

    return this.programs.filter(x => this.search === x.funding)
  }
}

Then you can use that computed property in v-for :

(然后，您可以在v-for使用该计算属性：)

  <tr v-for="(program, index) in searchContents">