vue v-for с фильтром выдает ошибку

Я пытаюсь использовать локальный фильтр с v-for, но получаю сообщение об ошибке

Свойство или метод "filterByTitle" не определен в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным либо в параметре данных, либо для компонентов на основе классов, инициализировав свойство.

Код ниже

<template>
  <div class="row">
    <div class="col pt-5">

      <ul class="blog-list-single" v-for="(post, index) in posts | filterByTitle" :key="index">
        <li class="title">{{ post.title }}</li>
        <li class="author">{{ post.author }}</li>
      </ul>

    </div>
  </div>
</template>

<style lang="scss">
</style>

<script>
  export default {
    data() {
      return {
        posts: [
          { title: 'a', author: 'nd' },
          { title: 'b', author: 'nd' },
          { title: 'c', author: 'nd' },
        ],
        selectedValue: 'a',
      }
    },
    filters: {
      filterByTitle(value) {
        return value.filter(el => el.title == this.selectedValue)
      }
    },
  }
</script>

javascript filter vue.js vuejs2 v-for
person locnguyen    schedule 31.10.2017    source источник
comment
Вы не можете использовать такой фильтр в Vue 2. Используйте вычисляемое свойство.   -  person Bert    schedule 31.10.2017
comment
Да, Vue 2 удалил фильтры. Ответ Берта ниже решает эту проблему.   -  person Michael Giovanni Pumo    schedule 31.10.2017

Ответы (1)


arrow_upward
3
arrow_downward

Фильтры ограничены в Vue 2 прежде всего интерполяцией строк форматирования. Теперь вы также можете использовать их в выражениях v-bind.

В Vue 2 вы бы отфильтровали такой список, используя вычисляемое свойство.

console.clear()
new Vue({
  el: ".row",
  data() {
    return {
      posts: [{
          title: 'a',
          author: 'nd'
        },
        {
          title: 'b',
          author: 'nd'
        },
        {
          title: 'c',
          author: 'nd'
        },
      ],
      selectedValue: 'a',
    }
  },
  computed: {
    filterByTitle() {
      // return the whole list if there is no filter value
      if (!this.selectedValue) return this.posts
      // otherwise return the list filtered by title
      return this.posts.filter(el => el.title == this.selectedValue)
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div class="row">
  <div class="col pt-5">

    <ul class="blog-list-single" v-for="(post, index) in filterByTitle" :key="index">
      <li class="title">{{ post.title }}</li>
      <li class="author">{{ post.author }}</li>
    </ul>

  </div>
</div>

person Bert    schedule 31.10.2017
comment
Что делать, если я хочу иметь несколько фильтров. Например filterByTitle и filterByAuthor. Можете ли вы сделать это с вычисляемыми значениями? - person locnguyen; 31.10.2017
comment
@locnguyen Конечно. Вы должны создать свое вычисляемое свойство, чтобы учитывать несколько фильтров, как в этом ответе: stackoverflow.com/a/43772871/38065 - person Bert; 31.10.2017