Ein Array in Vue.js sortieren

Wie kann ich ein Array nach Name oder Geschlecht sortieren, bevor es in einer v-for-Schleife angezeigt wird? https://jsfiddle.net/rg50h7hx/Ein Array in Vue.js sortieren

<div id="string"> 
    <ul> 
    <li v-for="array in arrays">{{ array.name }}</li> 
    </ul> 
</div>

// Vue.js v. 2.1.8 
var string = new Vue({ 
    el: '#string', 
    data: { 
    arrays: [ 
     { name: 'kano', sex: 'man' }, 
     { name: 'striker', sex: 'man' }, 
     { name: 'sonya', sex: 'woman' }, 
     { name: 'sindell', sex: 'woman' }, 
     { name: 'subzero', sex: 'man' } 
    ] 
    } 
})

Muss ich einen "berechneten" verwenden, oder was auch immer?

Quelle

2017-03-19 user3798618

Sie könnten versuchen, eine Getter-Methode machen, die vor der Rückkehr in das Array sortiert. Edit: sieht so aus, als ob das genau das wäre, worauf Sie sich beziehen. Siehe die Dokumentation hier: https://vuex.vuejs.org/en/getters.html – Christopher

@Christopher Danke. Ich wollte pure vue studieren, vielleicht ist vuex für mich zu schwierig ... – user3798618

Ich denke du müsstest vorher die Daten vorsortieren wenn es dann eingestellt ist. Sie könnten technisch sogar etwas wie Daten machen: {arrays: [3, 2, 1] .sort()}. Beachten Sie, dass Sie die Sortierfunktion mit einem Callback verwenden müssen, um nach einer Objekteigenschaft zu sortieren. – Christopher

Ja, eine einfache Möglichkeit, dies zu tun, kann eine berechnete Eigenschaft erstellen, die die sortedArray zurückkehren können, wie folgt:

computed: { 
    sortedArray: function() { 
    function compare(a, b) { 
     if (a.name < b.name) 
     return -1; 
     if (a.name > b.name) 
     return 1; 
     return 0; 
    } 

    return this.arrays.sort(compare); 
    } 
}

Siehe Arbeits demo.

Sie können die Dokumentation der Sorte here finden, die eine compareFunction benötigt.

compareFunction Gibt eine Funktion an, die die Sortierreihenfolge definiert. Wenn sie weggelassen wird, wird das Array nach dem Unicode-Codepunktwert jedes Zeichens entsprechend der String-Konvertierung jedes Elements sortiert.

Quelle

2017-03-19 07:48:30 Saurabh

Du bist mein Held)) Auf so ein einfaches Beispiel habe ich alles verstanden! Vielen Dank! – user3798618

Kann ich Ihnen eine andere Frage stellen? Warum werden hier zwei Funktionen verwendet? Wie weiß die zweite Funktion, was genau an A und was an B weitergegeben werden muss? – user3798618

@ user3798618 Bitte sehen Sie die hinzugefügten Details, lassen Sie mich wissen, wenn ein Problem? – Saurabh

mit Pfeil Funktionen ES6:

sortedArray(){ 
    return this.arrays.sort((a, b) => a.name > b.name); 
}

Quelle

2017-09-30 23:27:03

Ein Array in Vue.js sortieren

Antwort

Verwandte Themen