I was using v-model to handle inputs in a form, I had to change it to bind props values, at first input was like

<input type="text" class="form-control" placeholder="" v-model="username">

and now it looks like

<input type="text" class="form-control" placeholder="" v-bind:value="modelData.username" v-on:input="username = $event.target.value">

modelData is ing in props. and it has username.

when Using model, in data, i had defined

data: () => {
  return {
    username: ""
  }
},

and It was working fine, but after changing it to v-bind and v-on,

My question is how I can now get the value of username in methods? as in past, I was getting it as this.username to get the value and also clear it as well but now how I can get username in

methods: {}

I have a button to save input

<button class="btn btn-secondary" type="button" @click="validateFormAndSave($event)">Save</button>

When validateFormAndSave get called I can have this.username right now I cannot get the value? But the Vue Doc says v-model and v-bind:value& v-on:input are the same?

UPDATE:

There can be and cannot be some value already there in username, as it being filled with props value, So v-on:input="username = $event.target.value" don't get the already written value but the only new one you entered? or edit it? Why is it so? is there any method for just to get what anyone typed in there or already been typed?

UPDATE:

This is getting very ambiguous. So for now. 1. I can set v-bind:value, But I cannot get it in methods without editing it. 2. I cannot set this.username = "" and it will not be removed from input as well. 3. @input only get what you newly typed not what already in there

I was using v-model to handle inputs in a form, I had to change it to bind props values, at first input was like

<input type="text" class="form-control" placeholder="" v-model="username">

and now it looks like

<input type="text" class="form-control" placeholder="" v-bind:value="modelData.username" v-on:input="username = $event.target.value">

modelData is ing in props. and it has username.

when Using model, in data, i had defined

data: () => {
  return {
    username: ""
  }
},

and It was working fine, but after changing it to v-bind and v-on,

My question is how I can now get the value of username in methods? as in past, I was getting it as this.username to get the value and also clear it as well but now how I can get username in

methods: {}

I have a button to save input

<button class="btn btn-secondary" type="button" @click="validateFormAndSave($event)">Save</button>

When validateFormAndSave get called I can have this.username right now I cannot get the value? But the Vue Doc says v-model and v-bind:value& v-on:input are the same?

UPDATE:

There can be and cannot be some value already there in username, as it being filled with props value, So v-on:input="username = $event.target.value" don't get the already written value but the only new one you entered? or edit it? Why is it so? is there any method for just to get what anyone typed in there or already been typed?

UPDATE:

This is getting very ambiguous. So for now. 1. I can set v-bind:value, But I cannot get it in methods without editing it. 2. I cannot set this.username = "" and it will not be removed from input as well. 3. @input only get what you newly typed not what already in there

• javascript
• vue.js
• vuejs2

• why did you changed it to v-bind though? – Kapitan Teemo Commented Feb 20, 2019 at 8:46
• I am using one same form to make it ADD and UPDATE. so when form open in the update, I am attaching data ing in props to inputs form – Junaid Farooq Commented Feb 20, 2019 at 8:47
• You can access this.username if you have username in data. – dfsq Commented Feb 20, 2019 at 9:02
• I have username in data but i am not using v-model and I cannot access this.username as well – Junaid Farooq Commented Feb 20, 2019 at 9:45

2 Answers 2

v-model is just syntax sugar for =>

<input :value="modelValue" @input="modelValue = $event.target.value"/>

If you want something else, it's very easy to do. Just change the update side to onInput:

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

Then

data: () => {
  return {
    username: ""
  }
},
mounted() 
{ 
  this.username = this.modelData.username;
},
methods:{
  consoleUsername() {
    console.log(this.username);
  }
}

The best possible solution can be when you are getting your data from props and also loading it a form for v-models.

Using watch feature of Vue ponent.

First I added props as

  export default {
    props: ["vendorModelData"],

and then I pass it through the watch to v-model

watch: {
  vendorModelData() {
    this.updatePropsValue(this.vendorModelData)
    console.log("data updated")
  }
},

in this way, it always loads differently when Props get changed. This way I got be using v-model as well as load data from props to it.

I found it useful for me.