Hi, I’m using Vue3.0.0 and I have a very weird problem and I know this might be a simple solution, but I could not find it… I’ve searched for solutions and they all work just fine with the same code.
The problem is simple to explain:
I need INPUT components to reuse in the entire system, but if I create my input component template with surrounding DIV (to compose the CSS of course), the v-model is not updated anymore, regardless if I use $emit or not (tried several different ways). The following HTML works:
<template> <input type="text" v-model="xpto" /> </template>
But this NEVER updates the v-model (or :value or anything):
<template> <div> <input type="text" v-model="xpto" /> </div> </template>
Please someone tell me what is happening. This is driving me crazy. I watched videos and examples with the same solution working just easy and fine with surrounding tags. Using computed, method, watchers, returning the value with $emit (both with input or custom methods) did not work. I have no idea what is going on. It seemed a very simple solution, but I don’t know why a simple tag can break the v-model binding.
One more thing. I’m using Vue3. On Vue 2 latest this works:
<template> <div> <input type="text" v-model="xpto" @input="$emit('input', $event.target.value)" /> </div> </template>
Is this a Vue 3 issue or there is another way?