Laravel Livewire动态ID下拉框字体预览重置问题排查

问题原因 #

1. Livewire DOM 渲染机制：当添加新的字体选择框时，Livewire 会重新渲染整个 @foreach 块，原来的 DOM 元素（包括预览文本标签）会被全新的元素替换，之前通过 JS 设置的内联样式不会被保留，导致预览文本重置为初始状态。
2. 重复脚本绑定：你将 <script> 放在 @foreach 内部，每次新增选择框都会生成新的脚本，造成重复绑定事件，不仅冗余还可能引发意外问题。

解决方案 #

核心思路是把用户选择的字体值同步到 Livewire 组件的状态中，让重新渲染时能从状态读取并恢复样式和选中状态，同时优化 JS 事件绑定逻辑。

步骤1：更新 Livewire 组件状态

在你的 Livewire 组件类中添加状态属性，存储每个输入项的选中字体：

<?php

namespace App\Livewire;

use Livewire\Component;

class FontSelector extends Component
{
    public $fontinputs = [];
    public $fontSelections = []; // 存储每个项的选中字体，键与fontinputs对应

    public function mount()
    {
        // 初始化默认项
        $this->fontinputs = [uniqid()];
        $this->fontSelections = [end($this->fontinputs) => 'PT Sans'];
    }

    // 添加新的字体选择项
    public function addFont()
    {
        $newKey = uniqid();
        $this->fontinputs[] = $newKey;
        $this->fontSelections[$newKey] = 'PT Sans'; // 设置默认选中字体
    }

    // 删除字体选择项
    public function removeFont($key)
    {
        unset($this->fontinputs[$key]);
        unset($this->fontSelections[$key]);
        // 重新索引数组，避免键混乱
        $this->fontinputs = array_values($this->fontinputs);
        $this->fontSelections = array_values($this->fontSelections);
    }

    public function render()
    {
        return view('livewire.font-selector');
    }
}

步骤2：修改 Blade 视图代码

移除循环内的脚本，改用全局事件委托，同时绑定选中状态和预览样式：

<div>
    @foreach($fontinputs as $key => $value)
        <div class="font-item mb-3">
            <select class="form-select font-select" data-index="{{ $key }}">
                @foreach(['PT Sans', 'Roboto', 'Source Sans', 'Lato', 'Montserrat'] as $font)
                    <option 
                        value="{{ $font }}" 
                        style="font-family:'{{ $font }}'" 
                        {{ $fontSelections[$key] === $font ? 'selected' : '' }}
                    >
                        {{ $font }}
                    </option>
                @endforeach
            </select>

            <button class="btn btn-danger btn-sm ms-2" wire:click.prevent="removeFont({{$key}})">Remove</button>
                                
            <p class="p-3 fontpreview mt-2" style="font-family:'{{ $fontSelections[$key] }}' !important;">Preview Text Here</p>
        </div>
    @endforeach

    <button class="btn btn-primary btn-sm" wire:click.prevent="addFont">Add Font</button>
</div>

<script>
// 用事件委托监听所有字体选择框的change事件
document.addEventListener('change', function(e) {
    if (e.target.classList.contains('font-select')) {
        const index = e.target.dataset.index;
        const selectedFont = e.target.value;
        // 更新对应预览文本的样式
        const previewEl = e.target.closest('.font-item').querySelector('.fontpreview');
        previewEl.style.setProperty('font-family', `'${selectedFont}'`, 'important');
        // 同步更新Livewire组件状态
        @this.set(`fontSelections.${index}`, selectedFont);
    }
});
</script>

修改说明 #

• 通过 $fontSelections 存储每个选择项的选中字体，重新渲染时自动恢复选中状态和预览样式，避免重置。
• 移除循环内的重复脚本，改用全局事件委托，减少冗余代码并避免重复绑定问题。
• 用 @this.set 将 JS 中的选择结果同步到 Livewire 状态，确保组件状态与前端操作一致。

内容的提问来源于stack exchange，提问作者Pasindu Hasanjaya Peiris