[Vuejs]-VUE3 – Custom Input to format phone numbers. Can't get to work with v-model in parent

by

0👍

✅

Sami Kuhmonen pointed out what i was doing wrong, which was not declaring the prop name with the emit
here’s the working code

export default {
    name: 'XPhoneInput',
    props: ['modelValue'], //added the prop
    emits: ['update:modelValue'], //component emits the updated prop
    setup(props, { emit }) {
        const number = ref('');
        
        watch(number, () => {
            number.value = number.value.replace(/[^0-9]/g, '')
                .replace(/^(\d{2})?(\d{4})?(\d{4})?/g, '$1 $2 $3')
                .substr(0, 12);
            
            emit('update:modelValue', number.value); //here's what i did wrong, didn't add the prop name to the event name. adding it fixed it. this works
        });
        
        return {number};
    }
};

Leave a comment