Mam problemy z renderowaniem listy i filtrowaniem danych z wyliczonymi właściwościami

Zamiast zakodowanej wartości row.age, chciałbym użyć filterKey do filtrowania row.age.

Jak to zarchiwizować? Po prostu tego nie rozumiem.

Oto mój przykład:

szablon:

<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>

Rozwiązanie

Jak zasugerował @Sadraque_Santos, użyłem funkcji strzałek.

Kod

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

Ponadto muszę obsługiwać IE11, więc po prostu używam Babel do kompilacji kodu dla mnie.

0
Kuu_Tamo 21 listopad 2018, 15:57

1 odpowiedź

Najlepsza odpowiedź

Aby mieć dostęp do this wewnątrz filter, map lub innej użytecznej metody, musisz dowiedzieć się o funkcje strzałek, pozwalają na utworzenie funkcji bez this powiązanego z tym obiektem, więc zamiast używać:

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

Twój kod powinien wyglądać następująco:

    filteredCategory () {
      return this.dataToFilter
        .filter((row) => row.category === this.filterCategory)
        .filter((row) => row.age === this.filterKey)
    }
1
Sadraque Santos 22 listopad 2018, 20:16