Vue.js에서 어레이 정렬

Vue.js에서 어레이 정렬

어레이를 v-for 루프에 표시하기 전에 이름 또는 성별을 기준으로 정렬하려면 어떻게 해야 하는가?https://jsfiddle.net/rg50h7hx/

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

'계산'을 써야 하나, 아니면 뭐?

예, 이렇게 하면 다음과 같이 정렬된 어레이를 반환할 수 있는 계산된 속성을 쉽게 생성할 수 있다.

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

작업 데모를 참조하십시오.

여기서 compareFunction이 필요한 종류의 설명서를 찾을 수 있다.

compareFunction 정렬 순서를 정의하는 함수를 지정한다.생략할 경우 배열이 각 요소의 문자열 변환에 따라 각 문자의 유니코드 코드 포인트 값에 따라 정렬된다.

es6 화살표 기능 포함:

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

HTML측

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

Vue js 코드 | 로다시 사용

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' }
    ]
  },
  methods: {
     sortArrays(arrays) {
            return _.orderBy(arrays, 'name', 'asc');
        }
  }
})

• orderBy 함수에서 첫 번째 인수는 배열, 두 번째 인수는 키(이름/성) 세 번째 인수는 순서(asc/desc)

이것은 정말 멋지다:

sortFunc: function (){
  return this.arrays.slice().sort(function(a, b){
    return (a.name > b.name) ? 1 : -1;
  });
}

HTML에서 함수를 호출:

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

간편한 방법: 어레이 대신 computedArray를 사용할 수 있음

computed: {
computedFonksiyon() {
  this.arrays.sort(function(x, y) {
    return y.name- x.name;
  });
  return this.arrays;
}
}

참조URL: https://stackoverflow.com/questions/42883835/sort-an-array-in-vue-js