Input fields not working in Vue with v-model

Question

I have the following template syntax in a Vue single-file component:

<template>
   ...
   <input v-model="newInput">
   ...
</template>

In the same component, I have this data:

<script>
   ...
   data: () => {
     return {
      newInput: "",
     }
   }
   ...
</script>

Problem: In Chrome, this input field will not accept any text or numbers. The cursor is blinking in the field, but no text is entering. I opened dev tools, and there is no data change when I type. I checked my keyboard settings, nothing weird there.

Appreciate any guidance on this!

Answer 1

In my case this work perfectly,

Here in template tag I've modified input and in the script tag I've modified 'data()' method which accept any text or number.

Try this:

<template>

   <input type="text" v-model="newInput">

</template>


<script>

export default {
  data () {
    return {
      newInput: ''
    }
  }
}
</script>