解决方案

Question

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

我想使用filterKey来过滤row.age而不是硬编码的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

要访问this，filter内的map或您必须了解的arrow functions的另一种有用方法，它们允许您创建不带{{ 1}}绑定到该对象，所以不要使用：

this

您的代码应如下所示：

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

Vuejs2-使用计算的属性过滤的列表呈现

解决方案

代码

1 个答案: