Soy nuevo en vue y estaba tratando de ordenar mi matriz por el primer nombre. Tengo un botón que debería ordenar el nombre del jugador por el primer nombre. Pero cuando hago clic en el botón arroja un error como este.todos.player_name.sort() no es una función. Aquí está mi código en
JsFiddle = https://jsfiddle.net/ujjumaki/r6wp38yj/77/
Vista
<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>Métodos
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 **/ } } })Esto se debe a que con solo invocar Array.prototype.sort() sin ninguna función de comparación, el comportamiento predeterminado será el siguiente:
los elementos de la matriz se convierten en cadenas y luego se ordenan según el valor del punto de código Unicode de cada carácter.
... que no es lo que quieres. En su lugar, solo querrá comparar los valores devueltos por la clave first_name usando String.prototype.localeCompare en su lugar , es decir:
this.todos.player_name.sort((a,b) => a.first_name.localeCompare(b.first_name));Vea la prueba de concepto a continuación:
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>