Фильтр поиска с использованием вычисляемого свойства в VueJS

Question

У меня есть проект Vue, в котором я создал компонент Vue для отображения списка блогов.Этот компонент импортирует файл JS, содержащий массив для каждого списка блогов.

Существует ввод HTML, который я связал с вычисляемым свойством, чтобы позволить пользователю выполнять поиск.Цикл for затем фильтрует список блогов и показывает релевантные результаты.Однако, несмотря на то, что полный список отображается при загрузке, когда я ввожу поисковый запрос во все входные данные, все содержимое исчезает, и в консоли появляется сообщение «Невозможно прочитать свойство 'match' of undefined».Что я делаю не так?

Мой код следующий:

<ul>
  <li v-for="blog in filteredBlogs">
      {{blog.blogName}}
  </li>
</ul>


import blogs from "./../data/blogs";
export default {
    data() {
        return {
            blogs: blogs,
            search:'',
        };
    },
    computed: {
      filteredBlogs:function(){
        return this.blogs.filter((blog) => {
           return blog.blogName.match(this.search);
        });
      }
    }
};

Answer 1

Когда вы пишете this.blogs.filter( ... ), , это относится к текущему экземпляру Vue.Итак, Vue будет искать в data объекте blogs, которого там нет.

Не видя остальную часть вашего приложения, я не уверен, почему вы импортируете blogs и сохраняете его в ключ clubs в своем экземпляре Vue.Но чтобы исправить вашу текущую проблему, вы можете изменить filteredBlogs вычисленную опору на:

1. this.clubs.filter( ... ), ИЛИ
2. blogs.filter( ... )

См. Этот рабочий JS Fiddle для справки: https://jsfiddle.net/voveson/7awythx8/8/

Answer 2

Замените this.blogs.filter на blogs.filter.this это текущий экземпляр Vue, и вы импортируете блоги из файловой системы.