在沒有插件的情況下對Vue.js中的數據進行排序

Question

如何在沒有插件的情況下對Vue.js中的數據進行排序。我有這樣

var people = [ 
    { 
    id: 1, 
    firstName: "John", 
    lastName: "Doe", 
    email: "jdoe@example.com", 
    dob: "12/12/12" 
    }, 
    { 
    id: 2, 
    firstName: "Jane", 
    lastName: "Smith", 
    email: "jsmith@example.com", 
    dob: "11/11/11" 
    }, 
    { 
    id: 3, 
    firstName: "Brian", 
    lastName: "Rogers", 
    email: "brogers@example.com", 
    dob: "10/10/10" 
    } 
]; 

JSON數據如何排序，他們到遞減或遞增表，並在表頭是當表頭的用戶點擊後，圖標會動態地改變添加圖標。
例如，當數據是從最高到最低的圖標會fa-sort-amount-desc

我的表的代碼看起來像這樣

  <div class="row"> 
       <div class="col-xs-12" v-if="!laravelData || laravelData.total === 0"><em>No data available.</em></div> 
       <div class="col-xs-12"> 
        <div class="table-scrollable"> 
         <table class="table table-striped table-bordered table-hover"> 
          <thead> 
           <tr> 
            <th> ID</th> 
            <th> First Name</th> 
            <th> Last Name</th> 
            <th> Email </th> 
            <th> DOB </th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr v-for="data in laravelData.data" :key="data.title"> 
            <td> <a :href="data.account_link">@{{ data.id }}</a> </td> 
            <td> @{{ data.firstName }}</td> 
            <td> @{{ data.lastName }} </td> 
            <td class="text-right"> @{{ data.email }} </td> 
            <td class="text-right"> @{{ data.dob }} </td> 
           </tr> 
           <tr v-if="!laravelData || laravelData.total === 0"> 
            <td colspan="13"><em>No data available.</em></td> 
           </tr> 
          </tbody> 
         </table> 
        </div> 
       </div> 
      </div> 

Answer 1

基本上，你需要實現自己的排序函數對象的給定數組排序，或者您可以使用https://lodash.com/docs/4.17.4#orderBy。通過使用lodash，我創建了下面的簡單演示。

var people = [{ 
 
    id: 10, 
 
    firstName: "John", 
 
    lastName: "Doe", 
 
    email: "jdoe@example.com", 
 
    dob: "12/12/12" 
 
}, { 
 
    id: 2, 
 
    firstName: "Jane", 
 
    lastName: "Smith", 
 
    email: "jsmith@example.com", 
 
    dob: "11/11/11" 
 
}, { 
 
    id: 3, 
 
    firstName: "Brian", 
 
    lastName: "Rogers", 
 
    email: "brogers@example.com", 
 
    dob: "10/10/10" 
 
}]; 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    laravelData: { 
 
     data: people, 
 
    }, 
 
    sorting: { 
 
     col: '', 
 
     type: 'asc' 
 
     } 
 
    }, 
 
    methods: { 
 
    sort: function(key,type) { 
 
    //if(this.sorting.col){ 
 
     this.sorting.col = key; 
 
     this.sorting.type = type 
 
    // } 
 
     
 
     this.laravelData.data = _.orderBy(this.laravelData.data, key, this.sorting.type); 
 

 
     //this.laravelData.data = sortByKey(this.laravelData.data,key) 
 
     
 
    } 
 
    } 
 
})

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script> 
 
<script src="https://unpkg.com/lodash@4.16.0/lodash.js"></script> 
 
<div id="app"> 
 
    <div class="row"> 
 
    <div class="col-xs-12" v-if="!laravelData || laravelData.total === 0"><em>No data available.</em></div> 
 
    <div class="col-xs-12"> 
 
     <div class="table-scrollable"> 
 
     <table class="table table-striped table-bordered table-hover"> 
 
      <thead> 
 
      <tr> 
 
       <th> 
 
       ID 
 
       <i @click="sort('id','asc')" class="fa fa-sort-asc " aria-hidden="true"></i> 
 
       <i @click="sort('id','desc')" class="fa fa-sort-desc" aria-hidden="true"></i> 
 
       </th> 
 
       <th> First Name</th> 
 
       <th> Last Name</th> 
 
       <th> Email </th> 
 
       <th> DOB </th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr v-for="data in laravelData.data" :key="data.title"> 
 
       <td> <a :href="data.account_link">@{{ data.id }}</a> </td> 
 
       <td> @{{ data.firstName }}</td> 
 
       <td> @{{ data.lastName }} </td> 
 
       <td class="text-right"> @{{ data.email }} </td> 
 
       <td class="text-right"> @{{ data.dob }} </td> 
 
      </tr> 
 
      <tr v-if="!laravelData || laravelData.total === 0"> 
 
       <td colspan="13"><em>No data available.</em></td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

你可以找到的jsfiddle @https://jsfiddle.net/sureshamk/zc9wr53g/2/