Vue.js v-bind & v-model binding issue in Vue component

Question

I've use v-bind and v-model in my form input field. but when i run npm run dev command it's show the: v-bind:value="user.name" conflicts with v-model on the same element because the latter already expands to a value binding internally error.

in v-bind i'm bind my props value and in v-model use a local variable.

Here is my Code Sample:

<label>Name</label>
      <input name="name" class="form-control" v-bind:value="user.name" v-model="username"/>
 props:{

  user:{
    type:[Array,Object],
    required:true,
  },

},
data(){
  return{

   username:'',
   email:'',
   id:''
  }
},

gleam · Accepted Answer · 2019-01-28 17:01:04Z

1

v-model="username" is just a shorthand for: :value="username" @input="username = $event"

and as a result you have:

<input
  name="name"
  class="form-control"
  :value="user.name"
  :value="username"
  @input="username = $event"
/>

it is error - vue don't know what put into input

answered Jan 28, 2019 at 17:01

gleam

8706 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tristan Shelton · Accepted Answer · 2019-01-28 17:08:56Z

1

As a general rule v-bind:value conflicts with v-model because it also binds to value. The exceptions to that rule are check boxes and radio buttons where having both is valid (and may be where you got the idea from). In those cases v-model actually binds to the selected property.

<!-- Valid, binds to selected -->
<input type="checkbox" name="fruits" :value="currentFruit" v-model="selectedFruits" />
<input type="radio" name="animal" :value="currentAnimal" v-model="selectedAnimal" />

<!-- Not valid, both bind to value -->
<input type="text" :value="currentName" v-model-"currentName" />

answered Jan 28, 2019 at 17:08

Tristan Shelton

4905 silver badges8 bronze badges

3 Comments

Gabrielle-M Over a year ago

what can i do now , for overcome my issue??

Tristan Shelton Over a year ago

Just use v-model without the additional value binding. To get the initial value you can write something like username: this.user.name.

Gabrielle-M Over a year ago

username:this.user.name don't show any value, but when use {{user.name}} it's show value. that's problem. for your concern my child model is modal component.

akuiper · Accepted Answer · 2019-01-28 16:58:40Z

0

You can't have two different data sources (i.e. v-bind and v-model at the same time) bind to the same input; If you are looking to initialize the input from props, you can set the data prop username with this.user.name without using v-bind:value:

<input name="name" class="form-control" v-model="username"/>
 props:{

  user:{
    type:[Array,Object],
    required:true,
  },

},
data(){
  return{

   username: this.user.name,
   email:'',
   id:''
  }
}

answered Jan 28, 2019 at 16:58

akuiper

216k33 gold badges362 silver badges379 bronze badges

3 Comments

akuiper Over a year ago

Check how the user props looks like, does it contain a name field?

Gabrielle-M Over a year ago

yes, it's contain name field, i've tested it in view like {{user.name}} its show output.

akuiper Over a year ago

It seems to work for me at this jsfiddle: jsfiddle.net/qas4z0n6

Collectives™ on Stack Overflow

Vue.js v-bind & v-model binding issue in Vue component

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related