如何在 Livewire 3 中实现多输入框数组绑定？

2024-07-26 12:20:23

Livewire 3 中巧妙实现多输入框数组绑定

在 Livewire 3 开发中，我们经常需要处理表单中多个输入框的数据，例如用户可以上传多个视频链接。这时候，如果试图直接使用 wire:model="video.{{$i}}" 进行类似 video.1, video.2, video.3 这样的数组绑定，会发现 Livewire 并不会如预期那样工作。

本文将深入探讨这个问题的根源，并提供一种简洁优雅的解决方案，帮助你在 Livewire 3 中轻松实现多输入框的数组绑定，并附带详细的代码示例和解释。

为何 `wire:model="video.{{$i}}"` 失效？

在 Livewire 3 中， wire:model 指令用于将前端输入元素的值与组件属性进行双向绑定。然而，Livewire 3 并不直接支持使用 wire:model="video.{{$i}}" 这种动态属性的方式进行嵌套数据绑定。

这是因为 Livewire 在编译模板时，会将 wire:model 指令转换为 JavaScript 代码，而 video.{{$i}} 这种写法在 JavaScript 中会被解释为字符串拼接，而不是访问数组元素。

如何优雅地实现数组绑定

虽然无法直接使用动态属性，但我们可以利用 PHP 数组的特性和 Livewire 的生命周期方法，巧妙地实现相同的效果。

1. 定义组件属性

首先，在你的 Livewire 组件类中，定义一个数组来存储所有视频链接，并设置好表单验证规则：

use Livewire\Component;

class VideoUpload extends Component
{
    public $videos = []; // 用于存储所有视频链接的数组

    protected $rules = [
        'videos.*' => 'nullable|url', // 验证每个视频链接是否为空或有效的 URL
    ];
}

这里我们使用 $videos 数组来存储视频链接，并使用 $rules 属性定义了每个链接的验证规则，确保用户输入的数据符合要求。

2. 构建表单输入框

在 Blade 模板中，我们可以使用循环创建多个视频输入框，并使用 wire:model.defer 指令将每个输入框的值绑定到 $videos 数组中：

<form wire:submit.prevent="saveVideos">
    @for ($i = 1; $i <= 3; $i++)
        <div>
            <label for="video{{ $i }}">视频 {{ $i }}</label>
            <input type="text" 
                   id="video{{ $i }}" 
                   wire:model.defer="videos.{{ $i - 1 }}" 
                   placeholder="请输入视频链接">
            @error('videos.' . ($i - 1)) <span class="error">{{ $message }}</span> @enderror
        </div>
    @endfor

    <button type="submit">保存视频</button>
</form>

这里有几个关键点需要注意：

wire:model.defer : 我们使用 wire:model.defer 而不是 wire:model。 defer 修饰符会延迟数据的同步，直到表单提交或其他事件触发，避免每次按键都触发组件更新，提高性能。
数组索引 : 我们在绑定 wire:model.defer 时，使用了 videos.{{ $i - 1 }}。这是因为数组索引从 0 开始，而我们的循环从 1 开始。

3. 处理表单提交

最后，我们需要在 Livewire 组件类中定义一个方法来处理表单提交：

public function saveVideos()
{
    $this->validate();

    // 在这里处理 $this->videos 数组，例如将数据保存到数据库

    session()->flash('message', '视频已成功保存！');
}

在 saveVideos 方法中，我们首先调用 $this->validate() 对用户输入进行验证。验证通过后，你可以自由地处理 $this->videos 数组，例如将视频链接保存到数据库中。

代码解析

wire:model.defer : 该指令在用户输入时不会立即触发 Livewire 组件更新，而是等到表单提交或其他事件发生时才进行数据同步，提高了应用性能。
数组索引 : 通过在循环中使用 $i - 1 作为数组索引，确保视频链接能够按照顺序正确地存储在 $videos 数组中。
表单验证 : $rules 属性定义了每个视频链接的验证规则，确保用户输入的数据是有效的 URL 地址。