VueJS2排序JSON數組

我想從JSON文件a.json中排序JSON數組。VueJS2排序JSON數組

的陣列來了是這樣的：

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

我需要的「別名」對數據進行排序，從Vue公司JS JSON文件來了。

這是我的JavaScript代碼顯示在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; 
      } 
     } 
    }

但排序功能無法正常工作，如果我嘗試顯示排序後的數組中的服務器，我收到一個空白頁。

而且我在HTML頁面循環是：

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

希望這是有道理的，我可以得到它的工作。

來源

2017-10-28 Phoenix

您可以使用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>

來源

2017-10-28 15:12:40 Nisarg

你好，謝謝你的美好文檔片斷，它的工作原理。雖然我看到所有數組現在都已排序，但我不知道如何爲Vue JS v-for循環設置超時時間，因爲我們需要首先等待從JSON文件加載數據，然後對數據進行排序然後獲取排序後的數組並顯示它？如何設置v-for循環的超時時間？ – Phoenix

@Phoenix你並不需要等待。要麼文件被同步加載，在這種情況下，數組僅在那之後被排序。或者，如果文件異步加載，在這種情況下，您應該在承諾解析時對數組進行排序。 – Nisarg

VueJS2排序JSON數組

回答

相關問題