Vue3 Web Component V-model

Question

i would to create a web component with vue3 for manage inputs and forms. But i have problem with two data binding. I define the web component in my html page.

<vue-input-text id="prova_di_un_input_text" name="prova_di_un_input_text" value=''></vue-input-text>

and i hook the emit when i write

document.querySelector('#prova_di_un_input_text').addEventListener('update:value', function (e) {
        console.log("input cambiato", e, e.detail)

        let valore_da_aggiornare = e.detail[0].value
     
      });

but i don't understand how can update web component value after get new value.

thanks for every support

Answer 1

You don't need to implement two-way data bindings in Vue (awesome, right?) yourself unless you need something specific. Just use v-model directive, here's the doc

Code example:

<vue-input-text v-model="myValue" id="prova_di_un_input_text" name="prova_di_un_input_text" />

const myValue = ref('')