Vuejs2 - 使用计算属性过滤的列表渲染

Question

我在使用计算属性呈现列表和过滤数据时遇到一些问题

而不是硬编码 row.age 值，我想使用 filterKey 来过滤 row.age。

如何实现这个？我只是不明白。

这是我的例子：

模板：

<button type="button" class="btn btn-t1-secondary" v-on: click="filterKey = '15'">11</button>
<button type="button" class="btn btn-t1-secondary" v-on: click="filterKey = '30'">8</button>

<table>
    <thead>
        <tr>
            <th>Category</th>
            <th>Age</th>
            <th>Food</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="row in filteredCategory">
            <td>{{ row.category }}</td>
            <td>{{ row.age }}</td>
            <td>{{ row.food }}</td>
        </tr>
    </tbody>
</table>

JavaScript:

<script>
var app = new Vue({
  el: '#app',
  data: {
    filterKey: '',
    filterCategory: '',
    dataToFilter: [
      {
        category: 'dog',
        age: '11',
        food: 'bone'
      },
      {
        category: 'cat',
        age: '8',
        food: 'fish'
      }
      //etc.
    ]
  },
  computed: {
    filteredCategory() {
      return this.dataToFilter.filter(function (row) {
        return row.category === 'dog'
      })
        .filter(function (row) {
          console.log(this.filterKey)
          return row.age === '15'
        })
    },
  }
})
</script>

解决方案

正如@Sadraque_Santos 所建议的，我使用了箭头函数。

代码

filteredCategory() {
return this.dataToFilter.filter( r => r.category === 'dog' && r.age === this.filterKey);
}

此外，我必须支持IE11，所以我只使用Babel 为我编译代码。

Answer 1

要在 filter、map 或其他有用的方法中访问 this，您必须了解 arrow functions，它们允许您创建函数而无需this 绑定到那个对象，所以不要使用：

filteredCategory () {
  return this.dataToFilter.filter(function (row) {
    return row.category === 'dog'
  })
    .filter(function (row) {
      console.log(this.filterKey)
      return row.age === '15'
    })
}

你的代码应该是这样的：

    filteredCategory () {
      return this.dataToFilter
        .filter((row) => row.category === this.filterCategory)
        .filter((row) => row.age === this.filterKey)
    }

Vuejs2 - 使用计算属性过滤的列表渲染

Vuejs2 - List rendering filtered with computed properties

vue.js

computed-properties

解决方案

代码