Как отсортировать список при использовании рендеринга списка в VueJS

Question

Я работаю с рендерингом списков в Vue2. Список отображается нормально, но упорядочен в соответствии с порядком данных в моем массиве. Поэтому мне нужно отсортировать каждый элемент на экране по названию (az). Кажется, я не могу понять, как это сделать, когда у меня также есть поисковый ввод (filterBlogs). Любая помощь приветствуется.

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

HTML выглядит следующим образом:

<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>

Answer 1

Сначала вы фильтруете исходный массив, затем сортируете фильтрованный массив

computed: {
  filteredBlogs:function(){
    const filteredBlogs = this.blogs.filter((blog) => blog.title.toLowerCase().match(this.search.toLowerCase()) ||  blog.location.toLowerCase().match(this.search.toLowerCase()))
    filteredBlogs.sort((a, b) => {
                  if (a.title < b.title)
                      return -1;
                  if (a.title > b.title)
                      return 1;
                  return 0;
            });
    return filteredBlogs
  }
}