Input component not working inside <DIV>

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?

Hi there.
Can you replicate the piece of code that’s giving you an issue in a code sandbox or glitch
I’d like to try and help, but without having the code environment to work with , it’s harder to work on the problem with you

When you want to explicitly bind to non-root elements, you need to use disable the inheritAttrs property.

1 Like

Thank you James, you are the man.

setting inheritAttrs and

 v-bind="$attrs"

worked like a charm!

Brilliant!

Well, actually this worked for 50% of the situation after a lot of testing. Now the input value is not being cleared using the reset form or even after submit. It is weird, since it is clearing the variable, but not the input field content.

Can you provide a repro as a jsfiddle? It’ll be much quicker to debug this way