AlpineJS：如何有条件地向元素添加 class ？

Question

多亏了 Laravel Echo、Livewire 和 AlpineJS，我看到了一系列消息。

<div class="mt-4 rounded-lg p-6"
    x-data="{{ json_encode(['messages' => $messages, 'messageBody' => '']) }}"
    x-init="
        Echo.join('demo')
        .listen('MessageSentEvent', (e) => {
            @this.call('incomingMessage', e)
        })
">
    <template x-if="messages.length > 0"> 
        <template
            x-for="message in messages"
            :key="message.id"
        >
            <div class="my-8">
                <div class="flex flex-row justify-between border-b border-gray-200">
                    <span class="text-white-600 chat-block-author"  x-text="message.user.name"></span>: <span class="text-white-800" x-text="message.body" style="margin-left:10px;"></span>
                </div>
            </div>
        </template>
    </template>
</div>

我想在呈现的消息属于登录用户时动态添加一个名为 chat-block-author 的 class。 Message 模型确实包含每个项目的 user_id，但我似乎无法让 AlpineJS 像使用 Blade 那样很好地处理条件逻辑。

有什么建议吗？

这行不通

<template x-if="message.user_id == {{ Auth::user()->id }}">
    <div class="my-8">
        <div class="flex flex-row justify-between border-b border-gray-200">
            <span class="text-white-600 chat-block-author"  x-text="message.user.name"></span>: <span class="text-white-800" x-text="message.body" style="margin-left:10px;"></span>
        </div>
    </div>
</template>

因为它产生了这个错误

Uncaught (in promise) ReferenceError: message is not defined
    at eval (eval at tryCatch.el.el (alpine.js?df24:1), <anonymous>:3:36)
    at tryCatch.el.el (alpine.js?df24:140)
    at tryCatch (alpine.js?df24:127)
    at saferEval (alpine.js?df24:135)
    at Component.evaluateReturnExpression (alpine.js?df24:1747)
    at eval (alpine.js?df24:1714)
    at Array.forEach (<anonymous>)
    at Component.resolveBoundAttributes (alpine.js?df24:1696)
    at Component.updateElement (alpine.js?df24:1672)
    at eval (alpine.js?df24:1628)

Answer 1

您没有提到要将 class 添加到的位置，但在 AlpineJS 中，您可以动态分配任何属性，包括 classes，方法如下：

<div :class="{ 'chat-block-author': message.user_id === {{ Auth::user()->id }} }" class="your-other-classes go-here">
    ...
</div>

请注意，您也可以将它与现有的 class 属性一起使用，如果指定条件为真，:class 中定义的属性将动态添加到您的 class 属性中。

AlpineJS：如何有条件地向元素添加 class ？

AlpineJS: How can I add a class to an element conditionally?

laravel

alpine.js