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

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 的类。 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

您没有提到要将该类添加到何处，但在 AlpineJS 中，您可以通过执行以下操作动态分配包括类在内的任何属性：

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

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