Livewire 表单内容消失答案

【问题标题】：Livewire form content dissapearsLivewire 表单内容消失
【发布时间】：2021-09-23 15:29:00
【问题描述】：

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

<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>

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

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

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

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

【问题讨论】：

将 wire:ignore.self 添加到根选择的 div 中
能否请您发布答案，以便我验证它是否为正确答案？ @Prospero

标签： laravel-blade laravel-8 laravel-livewire

【解决方案1】：

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

public function mount() {

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

这将自动选择您的选项，您不需要选项标签上的 if 语句。

【讨论】：

【解决方案2】：

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

【讨论】：