Vue js 2テーブルソート

Question

Vue js 2を使用してソート可能なテーブルを作成しようとしています。私は既にテーブルを生成しています。

 <thead> 
     <tr> 
      <th class="table-header">Metric</th> 
      <th class="table-header" v-for="metric in metricList"><a href="#">{{metric}}</a></th> 
     </tr> 
    </thead> 
    <tbody> 
     <template v-for="item in metricItem"> 
      <tr> 
       <td class="table-cell" style="font-weight:bold"> {{ item }}</td> 
       <template v-for="metric in metricList"> 
        <td class="table-cell"> 
         {{getData[item][metric]}} 
        </td> 
       </template> 
      </tr> 
     </template> 
    </tbody> 

<script> 
import { mapGetters, mapMutations } from 'vuex'; 
export default { 
    name: 'scores', 

    data(){ 
     return { 
      metricList : ["Current", "Min", "Avg", "Max"], 

      metricItem : [ 
       'Happiness Score', 
       'Sadness Score' 
      ] 
     } 
    }, 


    computed: { 
     ...mapGetters ([ 
      'getData', //getter to get data 
     ]) 
    } 
} 
</script> 

をし、データセットは、このようなものです：：

私のコードは、以下を参照してください

getData { 

    Happiness Score { 

     Min : 62, 
     Max : 154, 
     Avg : 103 
     Current : 100 

    }, 

    Sadness Score { 

     Min : 66, 
     Max : 54, 
     Avg : 73 
     Current : 45 

    }, 

} 

私が使用してソート可能なテーブルを作成しようとしていますVueのJS 2.私は既に持っていますテーブルを生成し、このテーブルをどのようにソートするのかと思っています。

Answer 1

ヘッダーに表示されたメトリックをクリックしてテーブルをソートする場合は、ソート方法を追加し、@clickを使用してバインドします。

// ... 
methods: { 
    sort(metric) { 
    this.metricItem = this.metricItem.sort((item1, item2) => { 
     // change `>=` to `<` if you want to sort in descending order 
     return this.getData[item1][metric] >= this.getData[item2][metric]; 
    }); 
    }, 
} 
// ... 

フルデモhereを参照してください。