vue.jsプロパティの値に応じてテーブルの行にクラスを追加する方法

Question

プロパティ（overallStatus）の値に応じて、テーブル行にブートストラップクラス（成功、失敗など）を追加しようとしています。

私はどのようにこの機能を以下のコードで実装しますか？

ありがとうございます！

<div id="people" class="col-md-12">  
    <v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table> 
</div> 

Vue.use(VueTables.client, { 
    perPage: 50, 
    skin: 'table table-condensed' 
}); 

new Vue({ 
    el: "#people", 
    ready: function() { }, 
    methods: {}, 
    data: { 
     columns: ['deviceType', 'reasonForStatus', 'ip', 'monitorIsOn', 'freeSpace', 'cpuUsage', 'availableRam', 'statusTime'], 
     options: { 
      dateColumns: ['statusTime'], 
      headings: { 
       deviceType: 'Device Type', 
       ip: 'Device Ip', 
       reasonForStatus: 'ReasonForStatus', 
       freeSpace: 'Free Space', 
       cpuUsage: 'CPU Usage', 
       availableRam: 'Available Ram', 
       statusTime: 'Log Time' 
      }, 
      templates: { 
       deviceType: function (row) { 
        return row == 0 ? "Stander" : "Monitor"; 
       }, 
       availableRam: function (row) { 
        return row.availableRam + " mb."; 
       }, 
       freeSpace: function (row) { 
        return row.freeSpace + " %"; 
       }, 
       cpuUsage: function (row) { 
        return row.cpuUsage + " %"; 
       }, 
      }, 

     }, 
     selectedLetter: '', 
     tableData: tableItems, 
    } 
}); 

Answer 1

あなたはv-bind:classディレクティブ（または短いバージョン:class）を使用する必要があります。 docs hereをご覧ください。

例：

<template> 
    <div :class="{ 'class1 class2 class3': error }"</div> 
</template> 

または

：

data: function() { 
    return: { 
    error: true, 
    errorType: 'alert-error' 
    } 
} 

<template> 
    <div class="alert" :class="{ errorType: error }"</div> 
</template> 

<!-- or static text assignment --> 

<template> 
    <div class="alert" :class="{ 'alert-error': error }"</div> 
</template> 

この両方を使用すると、次のように行うことができ、同時に複数のクラスをバインドするには

<div class="alert alert-error"></div> 

につながります

<template> 
    <div :class="['class1', 'class2', error ? 'class3' : 'class4']"></div> 
</template>