How to use return an array in alphabetical order in Vue JS

Question

I have a list of blog titles stored in an array that I have printed out on the front-end. However, I can't get them in alphabetical order. My loop in Vue JS is as follows

<div id="app">
  <div>

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

Then I have a search input which works nicely now that everything is converted to lowercase, but before searching, I just want to loop to print in alphabetical order and not just the order they are stored in the array. My JS code is as below;

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

The filteredBlogs computed function should return the array filtered and sorted, no need for an extra sortedArray function — Jonathan Larouche
– Jonathan Larouche, Commented Oct 22, 2019 at 19:13

tony19 · Accepted Answer · 2022-07-15 23:57:18Z

2

You can bind the v-for directly on a computed function that returns the array filtered and sorted at the same time.

Template:

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

Note that I've added the :key="blog.title" in the v-for element. It is recommended to provide a key attribute with v-for whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains. See: VueJS list doc

VueJs class:

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

edited Jul 15, 2022 at 23:57

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 22, 2019 at 19:22

Jonathan Larouche

9927 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Al-76 Over a year ago

Can't thank you enough. I have been really struggling with that. I know understand how I can combine both computed properties. Thank you for your guidance.

Collectives™ on Stack Overflow

How to use return an array in alphabetical order in Vue JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related