Vue sort array followed by index ( 0, 1, 2, 3 ... )

Question

I am new to vue and I was trying to sort my array by the first name. I have a button that should sort the player name by the first name. But when I click on the button it throws an error like this.todos.player_name.sort() is not a function. Here is my code on

JsFiddle = https://jsfiddle.net/ujjumaki/r6wp38yj/77/

View


  
    
      First Name   
       Last Name   
       ID  
    
    
      {{fetchName.first_name}}
      {{fetchName.last_name}}
      {{fetchName.id}}

Methods

new Vue({
  el: "#app",
  data(){
  return{
    todos: {
        mission:1,
      player_name:[
        {   
            first_name: "Harry", last_name: "Kui" , id:'103',
        },
        {
            first_name: "Ali", last_name: "Kui", id:'107',
        },
        {
            first_name: "Bee", last_name: "Hui", id:'99',
        }
      ]
    }
  }
  },
  methods: {
    alertName: function(){
        this.todos.player_name.sort(); /** sort function is throwing an error here **/
      console.log(this.todos.player_name); /** and this does not format array objects followed by first name **/
    }
  }
})

user_395910 · Answer

That is because just by invoking Array.prototype.sort() without any comparator function will default to the behavior of:

the array elements are converted to strings, then sorted according to each character's Unicode code point value.

...which is not what you want. Instead, you will want to only compare the values returned by the first_name key using String.prototype.localeCompare instead, i.e.:

this.todos.player_name.sort((a,b) => a.first_name.localeCompare(b.first_name));

See proof-of-concept below:

new Vue({
  el: "#app",
  data(){
  return{
    todos: {
        mission:1,
      player_name:[
        {   
            first_name: "Harry", last_name: "Kui" , id:'103',
        },
        {
            first_name: "Ali", last_name: "Kui", id:'107',
        },
        {
            first_name: "Bee", last_name: "Hui", id:'99',
        }
      ]
    }
  }
  },
  methods: {
    alertName: function(){
        this.todos.player_name.sort((a,b) => a.first_name.localeCompare(b.first_name));
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}



  
    
      First Name   
       Last Name   
       ID  
    
    
      {{fetchName.first_name}}
      {{fetchName.last_name}}
      {{fetchName.id}}

Vue sort array followed by index ( 0, 1, 2, 3 ... )

1 Answers