Livewire 表单内容消失

Question

我在包含表单的 livewire 视图中有此代码。这是一个简单的 select 字段，您应该在其中 select 列表中的文档类型。

<div>
    <label for="documenttype" class="form-label"><strong>Document type</strong></label>
    <select wire:model="documenttype_id" class="form-control" id="documenttype" aria-describedby="documenttypeHelp">
        <option selected>{{ __( 'Choose' ) }}</option>
        @foreach( $documenttypes as $documenttype )
            <option value="{{ $documenttype->id }}" @if( isset( $documenttype_id ) && ( $documenttype_id == $documenttype->id ) ) selected @endif>
                {{ $documenttype->name }}
            </option>
        @endforeach
    </select>
</div>

问题是我希望它在编辑客户端时预先select输入正确的值。但是由于某种原因，当我在选项循环中添加此代码：@if( isset( $documenttype_id ) && ( $documenttype_id == $documenttype->id ) ) selected @endif 时，表单开始表现异常。每次填写表格的人 select 一个选项，内容就会变成空白。

这是情况 1（在 select 选择一个选项之前）：

这是情况 2（在 select 选择选项之后）：

我不知道为什么会这样，有人可以指导我如何解决这个问题吗？

Answer 1

解决此问题的快速方法是从您的组件 mount 方法分配 selected 值。

public function mount() {

    $this->documenttype_id = $client->documenttype_id
    //$client->documenttype_id being the previously selected value from your db
}

这将自动 select 您的选项，您不需要在选项标签上使用 if 语句。

Answer 2

将 wire:ignore.self 添加到根 select 的 div。使用此修饰符，您指示 Livewire 不要更新元素本身，但允许修改其子元素。

Livewire 表单内容消失

Livewire form content dissapears

laravel-blade

laravel-livewire

laravel-8