VueJS2 JSON 배열 정렬

Question

JSON 파일을 JSON 파일 a.json에서 정렬하려고합니다.

배열은 다음과 같이오고있다 : 나는 뷰 JS와 JSON 파일에서 나오는에서 "별칭 이름"으로 데이터를 정렬 할 필요가

{"data": 
    [ 
     {"exception":"", 
     "name":"Data Server1", 
     "alias":"TOR-Server", 
     "delayed":"NO", 
     }, 
     {"exception":"", 
     "name":"Data Server2", 
     "alias":"FRA-Server", 
     "delayed":"NO", 
     } 
    ] 

.

이 뷰 JS

<script type="text/javascript"> 

    var app = new Vue({ 
    el: '#app', 
    data: { 
    json: null 
    }, 

    computed: { 

     sorted: function() { 
      setTimeout(function() { 
      var app = this.app.json 
      if (app.length >= 6) 
      return app; 
       }, 5000); 
      } 
    }, 

    methods: { 
     toggleClass(){ 
      if (this.failed == true){ 
       this.failed = false;  
      } 
      else 
      { 
       this.failed = true; 
      } 
     } 
    } 

의 표시에 대한 내 자바 스크립트 코드입니다 그러나 정렬 된 기능이 작동하지 않습니다 내가 정렬 된 배열의 서버를 표시하려고하면, 나는 빈 페이지를받을 수 있습니다.

그리고 내 HTML 페이지의 루프는 다음과 같습니다

<div class="mainbutton" v-for="(server, index) in json.data "> 

희망이 말이 내가이 작업을 얻을 수 있습니다.

Answer 1

계산 된 내에서 Array.sort을 사용하면 정렬 된 배열을 반환 할 수 있습니다.

예를 들어 name 속성으로 배열 항목을 정렬하려면 this.json.sort((t1,t2) => t1.name < t2.name ? -1 : 1)을 호출 할 수 있습니다.

가 여기에 작동하는 코드 조각입니다 :

var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    json: [ 
 
     { 
 
     "exception": "", 
 
     "name": "Data Server3", 
 
     "alias": "TOR-Server", 
 
     "delayed": "NO", 
 
     }, 
 
     { 
 
     "exception": "", 
 
     "name": "Data Server1", 
 
     "alias": "TOR-Server", 
 
     "delayed": "NO", 
 
     }, 
 
     { 
 
     "exception": "", 
 
     "name": "Data Server2", 
 
     "alias": "FRA-Server", 
 
     "delayed": "NO", 
 
     } 
 
    ] 
 

 
    }, 
 

 
    computed: { 
 
    sortedJson: function() { 
 
     return this.json.sort((t1,t2) => t1.name < t2.name ? -1 : 1); 
 
    }, 
 
    sorted: function() { 
 
     setTimeout(function() { 
 
     var app = this.app.json 
 
     if (app.length >= 6) 
 
      return app; 
 
     }, 5000); 
 
    } 
 
    }, 
 

 
    methods: { 
 
    toggleClass() { 
 
     if (this.failed == true) { 
 
     this.failed = false; 
 
     } else { 
 
     this.failed = true; 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <div class="mainbutton" v-for="(server, index) in sortedJson "> 
 
    {{server.name }} 
 
    </div> 
 
</div>