<tr :class="overallStatus"></tr> or <tr :class="[ overallStatus === -1 ? 'warning' : 'success' ]"></tr>
vue.js How to add class to table row depending on property value
I am trying to add bootstrap classes (success, waning... ) to table rows depending on a propertys (overallStatus) value. How would i implement this functionallity in the code below? Thanks in adv...
stackoverflow.com
적용 예시
<table class="table table-striped table-bordered table-hover" id="datatable__item" style="width:100%;">
<thead>
<tr>
<th class="text-nowrap" data-i18n="item.label.selled_time">SELLED_TIME</th>
<th class="text-nowrap" data-i18n="character.label.group_id">GROUP_ID</th>
<th class="text-nowrap" data-i18n="character.label.uid">UID</th>
<th class="text-nowrap" data-i18n="character.label.char_id">CHAR_ID</th>
<th class="text-nowrap" data-i18n="item.label.buyer_uid">BUYER_UID</th>
<th class="text-nowrap" data-i18n="trade.label.price">PRICE</th>
<th class="text-nowrap" data-i18n="trade.label.price_per_piece">PRICE_PER_PIECE</th>
<th class="text-nowrap" data-i18n="item.label.item_id">ITEM_ID</th>
<th class="text-nowrap" data-i18n="item.label.item_name">ITEM_ID</th>
<th class="text-nowrap" data-i18n="item.label.count">COUNT</th>
<th class="text-nowrap" data-i18n="item.label.serial">SERIAL</th>
<th class="text-nowrap" data-i18n="item.label.state">STATE</th>
<th class="text-nowrap" data-i18n="common.label.reg_date">regdate</th>
</tr>
</thead>
<tbody>
<template v-for="(data, index) in data_list">
<tr v-on:click="rowSelect(data)" :class="[data.pricePerPiece >= $data.price * 3 ? 'bg-danger' : data.pricePerPiece >= $data.price * 2 ? 'bg-warning' : '']">
<td>{{ data.selledTime }}</td>
<td>{{ data.serverGroupId }}</td>
<td>{{ data.uId }} <button data-style="zoom-in" type="button" class="btn btn-xs btn-success m-r-xs button-click" v-on:click="rT(data)"><span data-i18n="common.button.detail">detail</span></button></td>
<td>{{ data.charId }}</td>
<td>{{ data.buyerUid }} <button data-style="zoom-in" type="button" class="btn btn-xs btn-success m-r-xs button-click" v-on:click="rT(data)"><span data-i18n="common.button.detail">detail</span></button></td>
<td>{{ data.price }}</td>
<td>{{ data.pricePerPiece }}</td>
<td>{{ data.itemId }} <button id="ladda-trade-monitoring" hidden data-style="zoom-in" type="button" class="btn btn-xs btn-success m-r-xs button-click" v-on:click="readDetail(data)"><span data-i18n="common.button.detail">detail</span></button></td>
<td>{{ data.itemName }}</td>
<td>{{ data.count }}</td>
<td>{{ data.serial }}</td>
<td>{{ data.state }}</td>
<td>{{ data.regDate }}</td>
</tr>
</template>
</tbody>
</table>pricePerPiece 값이 기준치 보다 3배이상이면 danger, 2배면 warning 속성 부여
