Как использовать возврат массива в алфавитном порядке в Vue JS

Question

У меня есть список названий блогов, которые хранятся в массиве, который я распечатал на внешнем интерфейсе. Однако я не могу получить их в алфавитном порядке. Мой цикл в Vue JS выглядит следующим образом:

<div id="app">
  <div>

    <input type="text" v-model="search">
    <ul>
      <li v-for="blog in filteredBlogs (sortedArray)">
        {{ blog.title }}
      </li>
    </ul>

  </div>
</div>

Затем у меня есть поисковый ввод, который прекрасно работает теперь, когда все преобразовано в нижний регистр, но перед поиском я просто хочу зациклить печать в алфавитном порядке, а не простопорядок их хранения в массиве. Мой JS-код указан ниже;

new Vue({
  el: '#app',
  data() {
    return {
      search:'',
      blogs: [
        {title:"Zebra Painting Made Easy"},
        {title:"Archery - What Not To Hit"},
        {title:"Hotels To Avoid"},        
        {title:"Mice Make Good Pets"}        
      ]
    };
  },
  computed:
      filteredBlogs: function(){
          return this.blogs.filter((blog) => {
              return blog.title.toLowerCase().match(this.search.toLowerCase());
          });
      },

      sortedArray: function() {
      function compare(a, b) {
        if (a.title < b.title)
          return -1;
        if (a.title > b.title)
          return 1;
          return 0;
      }
      return this.arrays.sort(compare);
    }        
  }
});

Answer 1

Вы можете связать v-for непосредственно с вычисляемой функцией, которая возвращает массив, отфильтрованный и отсортированный одновременно.

Шаблон:

<div id="app">
  <div>
    <input type="text" v-model="search">
    <ul>
      <li v-for="blog in filteredAndSortedBlogs" :key="blog.title">
        {{ blog.title }}
      </li>
    </ul>
  </div>
</div>

Обратите внимание, что я добавил :key="blog.title" в элемент v-for. Рекомендуется предоставлять ключевой атрибут с v-for всякий раз, когда это возможно, за исключением случаев, когда повторяющееся содержимое DOM является простым или вы намеренно полагаетесь на поведение по умолчанию для повышения производительности. См .: Список документов VueJS

Класс VueJs:

new Vue({
    el: '#app',
    data() {
        return {
            search:'',
            blogs: [
                {title:"Zebra Painting Made Easy"},
                {title:"Archery - What Not To Hit"},
                {title:"Hotels To Avoid"},        
                {title:"Mice Make Good Pets"}        
            ]
        };
    },
    computed: {
        filteredAndSortedBlogs() {
            return this.blogs
                .filter(blog => blog.title.toLowerCase().match(this.search.toLowerCase()))
                .sort((a, b) => {
                    if (a.title < b.title)
                        return -1;
                    if (a.title > b.title)
                        return 1;
                    return 0;
            });
        },
    },  
});