如何将Livewire动态表单中的Primary开关默认值设为ON

核心问题分析 #

你遇到的问题是动态添加电话号码时，Primary开关默认关闭，主要原因有两点：

1. 动态添加新字段时，未给primary数组对应索引赋值为1，导致默认值为null/0
2. 使用wire:ignore后，Livewire无法自动同步Bootstrap Toggle插件的状态，需要手动初始化

具体修改步骤 #

1. 调整Livewire组件的add方法，设置新字段默认Primary为开启

修改add方法，在添加新输入项时直接给对应索引的primary赋值为1：

public function add($i)
{
    $i = $i + 1;
    $this->i = $i;
    array_push($this->inputs, $i);
    // 新添加号码默认设为Primary
    $this->primary[$i] = 1;
    // 传递索引给前端事件，方便初始化Toggle
    $this->dispatchBrowserEvent('addPhoneInputs', ['index' => $i]);
}

2. 初始化第一个默认号码的Primary状态

在mount方法的else分支（无现有号码和旧数据时），设置第一个号码的Primary为1：

} else {
    $this->add($this->i);
    // 初始化第一个号码为Primary
    $this->primary[$this->i] = 1;
}

3. 修正重置字段方法的默认值（如果需要）

如果resetInputFields方法用于重置单个字段，将primary默认值改为1：

private function resetInputFields()
{
    $this->number = '';
    $this->type = '';
    $this->primary = 1;
    $this->phoneId = '';
}

4. 处理Bootstrap Toggle的初始化（解决wire:ignore同步问题）

在Blade模板中添加JS监听事件，确保新添加的Toggle开关自动开启，同时初始化页面加载时的已有开关：

@section('scripts')
<script>
    // 监听添加新号码的事件，初始化Toggle为开启状态
    window.addEventListener('addPhoneInputs', event => {
        $(`input[name="phones[${event.detail.index}][primary]"]`).bootstrapToggle('on');
    });

    // 页面加载时初始化所有Toggle开关
    $(document).ready(function() {
        $('input[data-toggle="toggle"]').each(function() {
            const isChecked = $(this).is(':checked');
            $(this).bootstrapToggle(isChecked ? 'on' : 'off');
        });
    });
</script>
@endsection

同时，在Blade的input标签中添加条件checked属性，确保初始渲染时状态正确：

<input type="checkbox" 
       wire:model="primary.{{ $value }}" 
       name="phones[{{ $value }}][primary]" 
       data-toggle="toggle" 
       data-size="sm" 
       data-on="Yes" 
       data-off="No" 
       data-onstyle="success" 
       data-offstyle="danger"
       {{ isset($primary[$value]) && $primary[$value] == 1 ? 'checked' : '' }}>

为什么之前的修改不生效？ #

• 数据库默认值仅对新建数据库记录生效，动态生成的前端表单字段不会自动读取该值
• 原有代码未在添加新字段时主动设置primary[$i] = 1，导致默认值为null/0，开关关闭
• wire:ignore会阻止Livewire更新该输入的DOM，因此必须通过JS手动同步Toggle插件的状态

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