laravel - AlpineJS:如何有条件地向元素添加类?
问题描述
多亏了 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)
解决方案
您没有提到要将该类添加到何处,但是在 AlpineJS 中,您可以通过执行以下操作动态分配包括类在内的任何属性:
<div :class="{ 'chat-block-author': message.user_id === {{ Auth::user()->id }} }" class="your-other-classes go-here">
...
</div>
请注意,您也可以将它与现有的类属性一起使用,:class
如果指定的条件为真,则在中定义的属性会动态添加到您的类属性中。
推荐阅读
- powershell - PowerShell 使用自签名证书连接到 REST API。
- javascript - Twilio - 如果最终用户结束通话,则无法捕捉
- .net-core - .net core 项目如何知道构建时要包含哪些文件
- java - 如何使用页面对象模型(Webdriver + Java + JUnit)断言“选择”列表具有值或可见文本?
- javascript - CKEDITOR :删除选择并在选择结束时设置光标位置
- ios - 自动填充不起作用 iphone 角度
- php - PhpStorm 识别 Linux 上的代码更改太慢
- css - 通过百分比设置字体大小后如何将其恢复正常?
- c# - Swagger 启动中的依赖解析
- node.js - 带有法语特殊字符的 Nodemailer 主题