CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Al-76
Al-76

Reputation: 1878

Search filter using a computed property in VueJS

I have a Vue project where I have created a Vue component to display a list of Blogs. This component imports a JS file containing an array for each blog listing.

There is a HTML input that I have linked to a computed property in order to allow a user to search. The for loop would then filter the blog listing and show relevant results. However, altough the full list shows on load, when I enter a search query in the input all content disappears and the error in the console says "Cannot read property 'match' of undefined". What am I doing wrong?

My code is as follow;

<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);
        });
      }
    }
};

Upvotes: 2

Views: 4580

Answers (2)

karlos
karlos

Reputation: 990

Replace this.blogs.filter by blogs.filter. "this" is the current Vue instance and you import blogs from file system.

Upvotes: 1

Vince
Vince

Reputation: 3286

When you write this.blogs.filter( ... ), this refers to the current Vue instance. So, Vue is going to look in the data object for blogs, which does not exist there.

Without seeing the rest of your app, I'm not sure why you are importing blogs and saving it to the clubs key in your Vue instance. But to fix your current problem, you could change your filteredBlogs computed prop to either:

  1. this.clubs.filter( ... ), OR
  2. blogs.filter( ... )

See this working JS Fiddle for reference: https://jsfiddle.net/voveson/7awythx8/8/

Upvotes: 1

Related Questions