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

당신은 반환하기 전에 배열을 정렬 게터 방법을 시도 할 수 있습니다. 편집 : 그게 정확하게 당신이 계산에 의해 언급하는 것 같습니다. 다음 문서를 참조하십시오. https://vuex.vuejs.org/en/getters.html – Christopher

@Christopher 고맙습니다. 나는 순수한 vue를 연구하기를 원했고, 아마도 vuex는 나를 위해 너무 어려웠다 ... – user3798618

나는 그것이 설정되었을 때 데이터를 미리 분류 할 필요가 있다고 생각한다. 기술적으로 데이터와 같은 것을 할 수도 있습니다 : {array : [3, 2, 1] .sort()}. 콜백과 함께 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 작업을.

here의 비교 기능을 사용하는 문서를 찾을 수 있습니다.

compareFunction 정렬 순서를 정의하는 함수를 지정합니다. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬됩니다. 화살표 기능

출처

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의 배열 정렬

답변

관련 문제