vue
vue copied to clipboard
remounting comonent
counter:
<example-component wire:model.lazy="label"/>
example component:
<template>
<input type="text" :value="value" @input="$emit('input', $event.target.value)">
</template>
<script>
export default {
props: ['value'],
mounted() {
console.log('Component mounted.')
},
};
</script>
On inputting something (there is an input in the example component) the lazy modifier does not work. Also the vue component is remounted/rerendered on every keydown which causes flickering.
According docs (https://laravel-livewire.com/docs/data-binding/) .lazy works with change event.
<input type="text" :value="value" @change="$emit('change', $event.target.value)">
and wire:ignore on parent component for not remont.