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
<div id="app">
<table>
<tr>
<th><b>First Name </b></th>
<th><b> Last Name </b> </th>
<th><b> ID </b> </th>
</tr>
<tr v-for="fetchName in todos.player_name">
<td>{{fetchName.first_name}}</td>
<td>{{fetchName.last_name}}</td>
<td>{{fetchName.id}}</td>
</tr>
</table>
<br>
<button v-on:click=alertName()>Sort by first name</button>
</div>
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 **/
}
}
})
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);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<tr>
<th><b>First Name </b></th>
<th><b> Last Name </b> </th>
<th><b> ID </b> </th>
</tr>
<tr v-for="fetchName in todos.player_name">
<td>{{fetchName.first_name}}</td>
<td>{{fetchName.last_name}}</td>
<td>{{fetchName.id}}</td>
</tr>
</table>
<br>
<button v-on:click=alertName()>Sort by first name</button>
</div>