使用Livewire在wire:click之后填充表单输入

Question

感谢您花时间阅读并回复。我想我可能已经把自己带进了兔子洞，我忽略了一个显而易见的答案。

这是我想要完成的:

我有一个使用Laravel Collective呈现的具有众多文本输入的表单。我有一个引导模式，允许用户输入一个URL:

<div>
<input wire:model="url" type="text">
<button class="btn btn-primary" wire:click="scrape">Scrape</button>
</div>

在提交URL时，我有一个Livewire方法来解析URL中的特定数据:

`public $url;
public function scrape()
{
$link = GoutteFacade::request('GET', $request->url);
//dd($link->filter('title')->text());
}`

我要做的是传递$link到我的Livewire组件(或Blade文件，如果需要的话)，所以我可以填充输入字段，像这样:

`<div class="form-group">
{!! Form::label('title', 'Title', ['class' => 'control-label']) !!}
{!! Form::text('title', (isset($link) ? $link->filter('title')->text() : null), ['class' => 'form-control', 'placeholder' => 'Your catchy title']) !!}
@error('title')
<x-alert type="danger" :message="$message" />
@enderror
</div>`

我试图避免做一个完整的页面重载，因此Livewire提供了一个更好的用户体验。

提前感谢!

Answer 1

你可以使用events

public function scrape()
{
$link = GoutteFacade::request('GET', $request->url);
$this->emitTo('to-emit-component', 'sendLink',['data' => $link]);  
}

在组件中发送-组件监听事件

protected $listeners = [
'sendLink'
];
public function sendLink($data)
{
dd($data);
}

Answer 2

我想我的回答会回应这个问题，但也会给其他人一些提示，让他们可以不这样做。

案例:我在Livewire文件中创建了一个挂载方法来获取查询参数。作为搜索问题，我想在提交查询的其他页面中填充输入。Query和Local作为模型链接到livewire刀片。

1. Livewire文件公共字符串$query = ";public String $local = ";

   公共函数mount(请求)｛如果($请求→输入(searchQui ') != '' &和;$request->input('searchOu') != " ") {$this->query = $request->input('searchQui');$this->local = $request->input('searchOu');}}

2. Livewire叶片