如何在Laravel 8中使用Livewire实现多级依赖下拉选择框

我们要实现带依赖关系的下拉选择框功能，借助Livewire可以非常简单地完成。现有两个模型State（省份）和City（城市），需求为用户选中省份下拉框的选项后，自动显示城市下拉框，可直接选择对应城市，无需手动编写AJAX或原生JavaScript代码，仅通过Laravel 8中的Livewire即可实现。

具体实现步骤 #

1. 安装Livewire #

在Laravel项目根目录执行安装命令：
composer require livewire/livewire

2. 创建Livewire组件 #

执行Artisan命令生成组件（示例组件名为counter，可根据业务自行修改命名）：
php artisan make:livewire counter
命令执行后会自动生成两个文件：

• app/Http/Livewire/Counter.php（组件逻辑文件）
• resources/views/livewire/counter.blade.php（组件视图文件）

3. 编辑组件逻辑文件Counter.php #

代码如下：

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $first, $second;

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

实际使用时可将$first、$second替换为$selectedState、$selectedCity这类语义化命名，同时可根据$selectedState关联查询对应城市列表，动态渲染城市下拉选项。

4. 编辑组件视图文件counter.blade.php #

代码如下：

<div>
    <select wire:model='first' name="1" id="1">
        <option value="">请选择</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
      @if($first)
      <select  wire:model='second' name="2" id="2">
        <option value="">请选择</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      @endif
</div>

其中wire:model实现了数据双向绑定，当第一个下拉框选中值变化后，Livewire会自动触发组件渲染，判断$first有值后渲染第二个下拉框，整个交互由Livewire内部完成，无需额外前端代码。

5. 页面引入组件 #

在需要使用该联动下拉功能的Blade模板中引入组件即可，示例在welcome.blade.php中引入：

<head>
    ...
    @livewireStyles
</head>
<body>
    <livewire:counter /> 
 
    ...
 
    @livewireScripts
</body>

注意必须引入@livewireStyles和@livewireScripts两个标签，保证Livewire的样式和脚本正常加载。

按照以上步骤操作即可完成基础联动下拉功能的开发，实际业务中可以替换示例中的静态选项为从State、City模型查询的动态数据，即可适配省份城市的业务场景。

内容的提问来源于stack exchange，提问作者hesam mahmoodi