Integration with livewire

[natanlins]

Someone knows how to integrate iMask to livewire?

1. I want to pass unmasked values to livewire property.
2. I want to receive unmasked values from property and display them masked.

[TFehre]

same question here. did you find a proper solution for that task?

[cbaconnier]

This works for me using Livewire 3:

<x-phone-input wire:model.live="phone" />

<div
    wire:ignore
    x-data="{
        value: $wire.entangle('{{ $attributes->wire('model')->value() }}', @js($attributes->wire('model')->hasModifier('live'))),
    }"
    x-init="() => {
        IMask($refs.input, {
            mask: '+{7}(000)000-00-00'
        });
    }"
>
    <input
        x-ref="input"
        x-bind:value="value"
        {{ $attributes }}
    />
</div>

• The input at the top of the video is an <input /> using wire:model.live to see how IMask will react from external changes.
• The input at the bottom of the video is the component <x-phone-input />, also using wire:model.live

Kooha-2024-11-14-10-43-22.mp4

note : I didn't tested against wire:navigate as I don't use this feature.