Livewire 显示变量
Livewire show variable
我有一个包含数据的变量 $login。
public $account;
public $login;
public function getAccountOrder($id)
{
$this->account = Buys::findOrFail($id);
$this->login = $this->account->accounts;
}
public function render()
{
$buys = Buys::where('user_id', auth()->user()->id)->get();
return view('livewire.profile', compact('buys'));
}
模态打开(所有内容在同一视图中的模态)
<a href="#" data-remodal-target="modal-account-email" wire:click="getAccountOrder({{ $buy->id }})" class="thing-item__link"></a>
模态显示这个变量,但不显示所需的数据。但是在 livewire 助手(google 扩展)中我可以看到我需要显示的数据
<div wire:ignore.self class="remodal remodal--prize" data-remodal-id="modal-account-email" aria-labelledby="modalRandTitle" aria-describedby="modalRandDesc" tabindex="-1">
<button type="button" class="remodal__close" data-remodal-action="close">
<svg><use xlink:href="#svg-btn_modal_close"></use></svg>
</button>
<div class="modal__header" id="modalRandTitle">Your login</div>
<div class="modal__content" id="modalRandDesc">
<div class="modal__accounts">
<div class="modal__accounts-row">
<div class="input__box">
<div class="input__box-btn" data-btn-clipboard="{{ $login }}" onclick="copyToClipboard('{{ $login }}')">
<svg class="svg-btn_clipboard"><use xlink:href="#svg-btn_clipboard"></use></svg>
<svg class="svg-btn_check"><use xlink:href="#svg-btn_check"></use></svg>
</div>
<div class="input__box-field">
<div class="input__box-label">Login</div>
<div class="input__box-value">{{ $login }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
如何在 livewire 组件中渲染这个变量?
您似乎希望 $login
的更改值反映在页面上的 javascript 中。如果是这种情况,您需要从 getAccountOrder
函数发送事件并使用 js 在页面上捕获它。
像这样:
public function getAccountOrder($id)
{
$this->account = Buys::findOrFail($id);
$this->login = $this->account->accounts;
$this->dispatchBrowserEvent('yourEventName', ['value'=> $this->login]);
}
那么就应该加上这样的东西:
<script>
window.addEventListener('yourEventName', (e) => {
//do something with the value
console.log(e.detail.value);
});
</script>
我有一个包含数据的变量 $login。
public $account;
public $login;
public function getAccountOrder($id)
{
$this->account = Buys::findOrFail($id);
$this->login = $this->account->accounts;
}
public function render()
{
$buys = Buys::where('user_id', auth()->user()->id)->get();
return view('livewire.profile', compact('buys'));
}
模态打开(所有内容在同一视图中的模态)
<a href="#" data-remodal-target="modal-account-email" wire:click="getAccountOrder({{ $buy->id }})" class="thing-item__link"></a>
模态显示这个变量,但不显示所需的数据。但是在 livewire 助手(google 扩展)中我可以看到我需要显示的数据
<div wire:ignore.self class="remodal remodal--prize" data-remodal-id="modal-account-email" aria-labelledby="modalRandTitle" aria-describedby="modalRandDesc" tabindex="-1">
<button type="button" class="remodal__close" data-remodal-action="close">
<svg><use xlink:href="#svg-btn_modal_close"></use></svg>
</button>
<div class="modal__header" id="modalRandTitle">Your login</div>
<div class="modal__content" id="modalRandDesc">
<div class="modal__accounts">
<div class="modal__accounts-row">
<div class="input__box">
<div class="input__box-btn" data-btn-clipboard="{{ $login }}" onclick="copyToClipboard('{{ $login }}')">
<svg class="svg-btn_clipboard"><use xlink:href="#svg-btn_clipboard"></use></svg>
<svg class="svg-btn_check"><use xlink:href="#svg-btn_check"></use></svg>
</div>
<div class="input__box-field">
<div class="input__box-label">Login</div>
<div class="input__box-value">{{ $login }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
如何在 livewire 组件中渲染这个变量?
您似乎希望 $login
的更改值反映在页面上的 javascript 中。如果是这种情况,您需要从 getAccountOrder
函数发送事件并使用 js 在页面上捕获它。
像这样:
public function getAccountOrder($id)
{
$this->account = Buys::findOrFail($id);
$this->login = $this->account->accounts;
$this->dispatchBrowserEvent('yourEventName', ['value'=> $this->login]);
}
那么就应该加上这样的东西:
<script>
window.addEventListener('yourEventName', (e) => {
//do something with the value
console.log(e.detail.value);
});
</script>