對Vue.js中的數組進行排序

如何在按v-for循環顯示數組之前按名稱或性別對數組進行排序？ https://jsfiddle.net/rg50h7hx/對Vue.js中的數組進行排序

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

我一定要使用「計算」，或什麼？

來源

2017-03-19 user3798618

你可以嘗試做這在返回之前排序陣列getter方法。編輯：看起來像這可能正是你所指的計算。請參閱這裏的文檔：https：//vuex.vuejs.org/en/getters.html – Christopher

@Christopher謝謝。我想研究純粹的vue，也許vuex對我來說太困難了...... – user3798618

我想你應該確保在數據被設置時預先設置。你甚至可以在技術上做一些類似data的事情：{arrays：[3，2，1] .sort（）}。請注意，您需要使用帶回調的排序函數按對象屬性進行排序。 – Christopher

是的，一個簡單的方法來做到這一點可以創建一個計算的屬性，它可以返回sortedArray，像以下：

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

見工作demo。

您可以找到帶有compareFunction的分類here的文檔。

compareFunction指定一個定義排序順序的函數。如果省略，則根據每個元素的字符串轉換，根據每個字符的Unicode代碼點值對數組進行排序。

來源

2017-03-19 07:48:30 Saurabh

你是我的英雄））在這樣一個簡單的例子中，我明白了一切！謝謝！ – user3798618

我可以問你另一個問題嗎？爲什麼在這裏使用兩個函數？第二個函數如何知道究竟需要傳遞給A以及B要傳遞什麼？ – user3798618

@ user3798618請參閱附加信息，如果有任何問題，請告知我們？ – Saurabh

箭頭功能ES6：

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

來源

2017-09-30 23:27:03

對Vue.js中的數組進行排序

回答

相關問題