Why cant I add two methods to a class using v-bind

user_7258262 0
Viewed 69

Using vue.js 2 I need to dynamically add classes to a <tr> element.

What works (single method call)

:tbody-tr-class="urgentEnquiryMixin_rowColour"

What doesn't work (two method calls, one a mixin)

Adding an additional method to the v-bind

:tbody-tr-class="urgentEnquiryMixin_rowColour applyUnreadClass"

What i have tried

:tbody-tr-class="[applyUnreadClass, urgentEnquiryMixin_rowColour]"

:tbody-tr-class="{applyUnreadClass(), urgentEnquiryMixin_rowColour}"

Additional code for info

applyUnreadClass(item, type) {
    if (!item || type !== 'row') {
        return '';
    }
    if (item.read === false) {
        return 'unread-email-row';
    }
    return '';
}

urgentEnquiryMixin_rowColour(item, type) {
    if (!item || type !== 'row') { return ''; }
    if (item.isUrgent === true) { return 'tr-urgent'; }
    return '';
}

<b-table id="assigned-enquiries-table" class="index-grid" headVariant="light" hover
    :items="enquiriesData" :fields="columns" :current-page="page" :per-page="rowsPerPage"
    show-empty :tbody-tr-class="applyUnreadClass, urgentEnquiryMixin_rowColour"
    @filtered="onFiltered" :busy="isBusy"
    >

Errors

'v-bind' directives require an attribute value Parsing error: Unexpected token ','. Parsing error: Unexpected token ','.eslint-plugin-vue

vuejs2 vue-component vue.js
1 Answers

You can use class directly for optional classes.

You can even use class as well to have classes that always work:

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

So create props for these classes (which are booleans) and pass them like that to you.

However if you want to add them dynamically. Create ONE string that you paste inside class. This will contain all classes in that string. (eg. 'Class1 Class2 Class3')

https://v2.vuejs.org/v2/guide/class-and-style.html

user_95683580
Related