vue.js How to add class to table row depending on property value

Question

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 advance!

<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,
    }
});

i know that v-bind:class can be used but in the given markup there is no row tag to use i on as it is created somewhere in the vue framework. — Kim Bay Andersen
– Kim Bay Andersen, Commented Sep 21, 2016 at 10:06

Roy J · Accepted Answer · 2016-09-21 14:40:27Z

5

You need to use v-bind:class directive (or shorter version :class). Take a look at docs here.

Example:

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>

This both would result in

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

To bind multiple classes at the same time you can do like this:

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

or

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

edited Sep 21, 2016 at 14:40

Roy J

44k10 gold badges84 silver badges106 bronze badges

answered Sep 21, 2016 at 10:47

Primoz Rome

11.1k19 gold badges83 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kim Bay Andersen Over a year ago

Can you elaborate how exactly i can apply this to my table rows)

Primoz Rome Over a year ago

@KimBayAndersen inside your <v-client-table> component you need to have a logic and apply the style you want. For example <tr :class="overallStatus"></tr> or <tr :class="[ overallStatus === -1 ? 'warning' : 'success' ]"></tr> or whatever your logic for the right class is.

Collectives™ on Stack Overflow

vue.js How to add class to table row depending on property value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related