使用控制器的LiveWire组件编辑用户数据用户数据

Question

我想将ID从标准刀片视图传递给livewire组件视图。

我在Blade文件中有一个编辑用户按钮，因此当用户单击按钮Bootstrap Modal（这是Livewire Component View），ID将打开。

//一些Ajax用编辑按钮渲染表，

success: function(response) {                   
    $('tbody').html("");
    $.each(response, function(key, item) {
    str += '<tr>';
    //blahh...
    str += '<a href="#" id="' + item.id + '" wire:click="edit({{ '+item.id+' }})" class="text-info mx-1 editIcon" data-toggle="modal" data-target="#editUserModal"></a>';
    //blahh...
    str += '</tr>';
    })
    $('tbody').append(str);
)};

如果我坚持使用jQuery，我可以成功打开一个使用数据进行编辑的模态。但是我想打开模态作为LiveWire组件。

LiveWire View

<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-hidden="true">
    //blahh
</div>

LiveWire组件

public function render()
{
    //some logic here to open modal with id clicked, so I can do something as below
    $user = User::where('id', $id)->first();        
    
    $this->user_id = $id;
    $this->first_name = $student->student_first_name;
    return view('livewire.user.edit');
}

任何建议都会有所帮助。 我不想将整个项目移植到Livewire，我只想将LiveWire组件用于某些地方，因为它的简单和较少的代码

Answer 1

您可以发出事件从表中从表中单击使用$ emit 或livewire.emit。

success: function(response) {                   
    $('tbody').html("");
    $.each(response, function(key, item) {
    str += '<tr>';
    //blahh...
    str += '<a href="#" id="' + item.id + '" wire:click="$emit({{ openmodal'+item.id+' }})" class="text-info mx-1 editIcon" data-toggle="modal" data-target="#editUserModal"></a>';
    //blahh...
    str += '</tr>';
    })
    $('tbody').append(str);
)};

并在您的模态上听：

public bool $open = false;

public ?int $userId = null;

protected $listeners = ['openmodal' => 'openModal'];

public openModal(int $userId)
{
    $this->userId = $userId;
    // you can load your user data here
    $user = User::findOrFail($userId);
}

public function render()
{
    return view('livewire.user.edit');
}