VueJS2 sort JSON array

Question

JSONファイルをJSONファイルa.jsonからソートしようとしています。

配列は次のように来ている：私はVueのJSとJSONファイルから来て、「エイリアス名」でデータをソートする必要が

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

。

これは、Vueの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; 
      } 
     } 
    } 

に表示するための私のJavascriptのコードですが、ソート機能が働いていないと私はソートされた配列内のサーバーを表示しようとすると、私は空白のページを受け取ります。

そして、私の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>