Laravel 8+Livewire中JQuery输入掩码切换/提交后值为空问题

问题原因 #

• wire:ignore.self 阻断Livewire的DOM追踪：标签页容器添加了wire:ignore.self，Livewire会完全忽略该元素及其子元素的所有DOM变化，导致输入框的内容更新无法被Livewire捕获，提交或切换标签页时自然无法同步到$tin属性。
• 输入掩码插件未触发Livewire同步机制：jQuery Inputmask直接修改input的value值，但Livewire的wire:model依赖自身的input/change事件监听来同步数据，插件的DOM操作不会自动触发这些事件；加上使用了wire:model.defer（仅在提交时同步），进一步导致数据无法同步。
• 脚本选择器错误：$("tin-mask")缺少类选择器的.，正确写法应为$(".tin-mask")，导致初始值设置无效，但这不是值为空的核心原因。

解决方案 #

方案1：调整wire:ignore范围（推荐） #

如果标签页不需要完全被Livewire忽略，移除容器上的wire:ignore.self，或者仅将其应用到不需要Livewire处理的元素上，让输入框处于Livewire的管辖范围内：

<div class="tab-pane active" id="vendor-customer-tab" role="tabpanel">
    <div class="mb-3 row">
        <label for="bank-account-number" class="col-md-3 col-form-label">TIN<span class="required">*</span></label>
        <div class="col-md-9">
            <input class="form-control tin-mask" type='text' id="tin_num" placeholder="Enter TIN Number" wire:model.defer="tin">
            @error('tin')
            <span class="text-danger">{{$message}}</span>
            @enderror
        </div>
    </div>
</div>

方案2：手动触发Livewire数据同步 #

保留wire:ignore.self，通过脚本监听输入框变化，手动调用Livewire的set方法同步值：

$(document).ready(function(){
    const $tinInput = $('.tin-mask');
    $tinInput.inputmask("999-999-999-999");
    $tinInput.val("000-000-000-000");

    // 监听输入变化，手动同步到Livewire属性
    $tinInput.on('input change', function() {
        @this.set('tin', $(this).val());
    });
});

方案3：使用隐藏字段同步 #

如果必须保留wire:ignore.self，可以用隐藏字段绑定wire:model.defer，脚本将输入框的值同步到隐藏字段：

<div wire:ignore.self class="tab-pane active" id="vendor-customer-tab" role="tabpanel">
    <div class="mb-3 row">
        <label for="bank-account-number" class="col-md-3 col-form-label">TIN<span class="required">*</span></label>
        <div class="col-md-9">
            <input class="form-control tin-mask" type='text' id="tin_num" placeholder="Enter TIN Number" value="{{ $tin }}">
            <input type="hidden" wire:model.defer="tin" id="hidden-tin">
            @error('tin')
            <span class="text-danger">{{$message}}</span>
            @enderror
        </div>
    </div>
</div>

$(document).ready(function(){
    const $tinInput = $('.tin-mask');
    const $hiddenTin = $('#hidden-tin');
    
    $tinInput.inputmask("999-999-999-999");
    // 初始化输入框值为Livewire属性值或默认值
    $tinInput.val($hiddenTin.val() || "000-000-000-000");

    // 同步输入框值到隐藏字段
    $tinInput.on('input change', function() {
        $hiddenTin.val($(this).val());
    });
});

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