我的第一个堆栈溢出问题。Web开发爱好者和学习者在这里。感谢任何帮助。
我正在使用Laravel 10和livewire 3与alertifyjs CDN链接。我有一个“添加到愿望清单”按钮在我的个人产品livewire视图：
<div class="mt-2">
<a href="" class="btn btn1"> <i class="fa fa-comments" aria-hidden="true"></i> Enquire</a>
<button type="button" wire:click="addToWishList({{ $motors->id }})" class="btn btn1"> <i class="fa fa-heart"></i> Add To Wishlist </button>
</div>我正在从livewire组件发送一个事件，根据livewire文档。一个不同的消息文本应该被分派，这取决于用户是否已经将此产品添加到用户的愿望清单或没有。
public function addToWishList($motorId)
{
if(Auth::check())
{
if(Wishlist::where('user_id', Auth::id())->where('motor_id', $motorId)->exists())
{
// session()->flash('message', 'Already added to wishlist');
$this->dispatch('message', [
'text' => 'Already added to wishlist'
]);
return false;
}
else
{
Wishlist::create([
'user_id' => Auth::id(),
'motor_id' => $motorId
]);
// session()->flash('message', 'Wishlist updated successfully');
$this->dispatch('message', [
'text' => 'Wishlist updated successfully'
]);
}
}
else
{
return redirect()->route('login');
}
}然后，我在我的刀片布局中监听“消息”事件，该布局加载了每个前端页面，还包含了我所有的CSS和脚本。
<body>
@livewireScripts
{{-- jquery --}}
<script src="{{ asset('assets/js/jquery-3.7.0.min.js') }}"></script>
{{-- bootstrap --}}
<script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script>
{{-- aleritfyjs --}}
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
<script>
window.addEventListener('message', event => {
alertify.set('notifier','position', 'top-right');
alertify.success('hey '+(event.detail.text)+'!');
});
</script>
<div id="app">
@include('layouts.inc.frontend.navbar')
<main>
@yield('content')
</main>
</div>
</body>问题描述：
只有当我点击愿望清单按钮时，警报才会出现。当我加载页面时它不会触发。这似乎表明已调度事件正在被拾取。但是我的event.detail.text返回“未定义”。我之所以知道是因为当我将它与一些纯文本连接起来时，比如'hey '+（event.detail.text）+'！'，它显示“嘿，未定义！”
如果有人能找出我做错了什么或问题是什么，那将是非常感激的。
我希望它能选择数组中的“text”项
$this->dispatch('message', [
'text' => 'Wishlist updated successfully'
]);并在警报中显示消息字符串。我在'event.detail.text'周围连接的纯文本显示得很好，但由于某种原因，event.detail.text返回undefined。
只有当我单击运行addToWishList（）函数的按钮时，才会出现alertify消息，该函数用于调度事件。所以看起来事件确实被接收了，但不知何故“text”属性不包含消息。
1条答案
按热度按时间ecbunoof1#
好吧，我解决了。我猜我在livewire组件中使用的数组语法在旧版本的Livewire中使用过。
在Livewire 3.0中工作的语法是：
现在这个.event.text包含了相应的消息。