I recently started working on a Vue project where I developed a Vue component that showcases a collection of different blogs. To achieve this, the component imports a JavaScript file that contains an array with all the details pertaining to each blog.
One of the key features I implemented is linking an HTML input field to a computed property. This allows users to search for specific blogs within the list. Upon entering a search query, the for loop dynamically filters through the blog listings and displays only the relevant results. However, I encountered an issue where upon typing a search query, all content disappears and an error message appears in the console stating "Cannot read property 'match' of undefined." What could be causing this problem?
Here's a snippet of my code:
<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);
});
}
}
};