Vuejs2 - рендеринг списка, отфильтрованный по вычисленным свойствам - PullRequest
Новая
       16

Vuejs2 - рендеринг списка, отфильтрованный по вычисленным свойствам

0 голосов
/ 21 ноября 2018

У меня есть некоторые проблемы с отображением списка и фильтрацией данных с вычисленными свойствами

Вместо жестко закодированного значения 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 для компиляции кода для меня.

1 Ответ

0 голосов
/ 21 ноября 2018

Чтобы иметь доступ к this внутри filter, map или другому полезному методу, вы должны узнать о функциях стрелок , они позволяют создавать функции без привязки к 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)
    }
...