为什么我不能使用 v-bind 将两个方法添加到 class

Question

使用 vue.js 2 我需要动态添加类到元素。

什么有效（单一方法调用）

:tbody-tr-class="urgentEnquiryMixin_rowColour"

什么不起作用（两个方法调用，一个 mixin）

向 v-bind 添加一个额外的方法

:tbody-tr-class="urgentEnquiryMixin_rowColour applyUnreadClass"

我试过的

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

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

信息的附加代码

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"
    >

错误

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

Answer 1

您可以直接使用 class 作为可选的 classes。

您甚至可以使用 class 让 class 始终有效：

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

因此，为这些 classes（它们是布尔值）创建 props 并将它们像这样传递给您。

但是如果你想动态添加它们。创建一个您粘贴到 class 中的字符串。这将包含该字符串中的所有 classes。（例如 'Class1 Class2 Class3'）

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

为什么我不能使用 v-bind 将两个方法添加到 class

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

vue.js

vuejs2

vue-component