Currently, I am working on List Rendering in Vue2. The list is rendering correctly, but it appears ordered based on the data arrangement in the array. For better organization, I need to sort each item alphabetically by title. However, I am facing difficulty in achieving this while also using a search input (filteredBlogs). Any assistance or guidance on this matter would be greatly appreciated.
const app = new Vue({
el: '#app',
data: {
search: '',
blogs: [
{
title: 'Northern Towns' ,
location: 'Leeds'
},
{
title: 'Things to do in Leeds' ,
location: 'Yorkshire'
},
{
title: 'Visit the beach',
location: 'Cornwall'
}
]
},
computed: {
filteredBlogs:function(){
return this.blogs.filter((blog) => {
return blog.title.toLowerCase().match(this.search.toLowerCase()) || blog.location.toLowerCase().match(this.search.toLowerCase());
.sort((a, b) => {
if (a.title < b.title)
return -1;
if (a.title > b.title)
return 1;
return 0;
});
}
}
});
The HTML structure is as follows;
<div id="app">
<label>
Search name: <input type="text" v-model='searchString'>
</label> <br>
<li v-for='item in filteredBlogs' :key='item.id' class="my-list-item">
{{item.title}}
</li>
</div>