Vue.js içinde bir dizi sıralama

V-for döngüsünde görüntülemeden önce bir diziyi ada veya cinsiyete göre nasıl sıralayabilirim? https://jsfiddle.net/rg50h7hx/Vue.js içinde bir dizi sıralama

<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' } 
    ] 
    } 
})

Ben bir "bilgisayarlı" kullanmak zorunda mıyım, ya da her neyse?

kaynak

2017-03-19 user3798618

Sen dönmeden önce diziyi sıralar, bir alıcı yöntemini yapma deneyebilirsiniz. Düzenleme: Tam olarak ne yaptığınızı hesapladığınız gibi görünebilir. Buradaki belgelere bakın: https://vuex.vuejs.org/en/getters.html – Christopher

@Christopher Teşekkür ederim. Ben saf vue çalışmak istedim, belki benim için vuex çok zor ... – user3798618

Ben o zaman ayarlandığında verileri önceden tahmin emin olmanız gerektiğini düşünüyorum. Teknik olarak bile veri gibi bir şey yapabilirsiniz: {diziler: [3, 2, 1] .sort()}. Not Bir object özelliğine göre sıralamak için sort işlevini bir callback ile kullanmanız gerekir. – Christopher

Evet, aşağıdaki gibi sortedArray dönebilirsiniz hesaplanan bir özellik oluşturmak olabilir bunu yapmanın kolay bir yolu:

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

Bkz demo çalışma.

Karşılaştırma işlemi yapan here sıralamasının belgelerini bulabilirsiniz.

compareFunction Sıralama düzenini tanımlayan bir işlevi belirtir. Eğer atlanırsa, dizi, her bir elemanın dizi dönüşümüne göre her bir karakterin Unicode kod noktası değerine göre sıralanır. ok fonksiyonları ile

kaynak

2017-03-19 07:48:30 Saurabh

Sen benim kahramanımsın)) Böylesine basit bir örnekte, her şeyi anladım! Teşekkür ederim! – user3798618

Size başka bir soru sorabilir miyim? Burada neden iki işlev kullanılıyor? İkinci fonksiyon, A'ya ne yapılması gerektiğini ve B'ye neyi bilmesi gerektiğini nasıl biliyor? – user3798618

@ user3798618 Lütfen ek ayrıntılara bakın, herhangi bir sorun olursa haberim olsun? – Saurabh

ES6:

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

kaynak

2017-09-30 23:27:03

Vue.js içinde bir dizi sıralama

cevap

İlgili konular