Laravel 8: Input mask not properly working in livewire

Question

In the application, we used the input mask of jquery in one of the module.

In that module, there's a tab. whenever I tried to change the tab or submit it.

The value of tin is always null

Blade file

<div wire:ignore.self class="tab-pane active" class="tab-pane " 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" > -->
            <input  class="form-control tin-mask" type='text' id="tin_num" placeholder="Enter TIN Number" wire:model.defer="tin">
            <!-- <input type="hidden" name="tin_num" wire:model.defer="tin"/> -->
            @error('tin')
            <span class="text-danger">
                {{$message}}
            </span>
            @enderror
        </div>
    </div>
</div>

Script

<script type="text/javascript">
    $(document).ready(function(){
        $('.tin-mask').inputmask("999-999-999-999");
        $(".tin-mask").val("000-000-000-000");
        // $('#tin_num').change(function(e){
        //     var tin_number = $('#tin_num').val();
        //     $("input[name='tin_num']").val(tin_number);
        //     e.preventDefault();
        //     return false;
        // });
        // $(".tin-mask").attr("value", "000-000-000-000");
    });
</script>

Question: Why everytime I tried to change the tab or submit, the value of TIN becomes blanks.?

Answer 1

Probably because

wire:model.defer="tin"

and

$(".tin-mask").val("000-000-000-000");

don't go hand-in-hand. jQuery sets the value, but wire:model also sets the value and so far $tin probably has no value.