为什么我不能使用v-bind添加两种方法

发布于 2025-02-01 04:30:35 字数 1361 浏览 0 评论 0原文

使用vue.js 2，我需要动态地将类添加到A＆lt; tr＆gt;元素。

什么有效（单方法调用）

:tbody-tr-class="urgentEnquiryMixin_rowColour"

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

在V-中添加了另一种方法绑定

: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'指令需要一个属性值解析错误：意外令牌'，'。解析错误：意外令牌'，'。eslint-plugin-vue

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

翻身的咸鱼 2025-02-08 04:30:35

您可以将类直接用于可选类。

您甚至还可以使用课程来始终有效的课程：

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

因此，为这些类（是布尔人）创建道具，然后将它们像这样将其传递给您。

但是，如果您想动态添加它们。创建一个您在课堂内粘贴的字符串。这将包含该字符串中的所有类。（例如'class1 class2 class3'）

https：//v.vuejs .org/v2/guide/class-style.html

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

回复收藏 0 原文

~没有更多了~