对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中的数组进行排序

回答

相关问题