CODEWITHSUNDEEP
typescriptvue.jsvuejs2
Сорок два
Сорок два

Reputation: 33

vuejs - v-model doesn't update class property

I have a problem with form and v-model that doesn't update my class's property

To make it quick here is really basic sample of what isn't going as I expect

<input placeholder="Title" 
  v-model="title"
  type="text">
<button @click="send">send</button>

@Component
export default class Home extends Vue {
  public title = ''

  send = async(): void => {
    console.log(this.title)
  }
}

The console.log prints the default property value (empty string) and is not updated when I type something in the input

Upvotes: 0

Views: 322

Answers (1)

Nima Ebrazeh
Nima Ebrazeh

Reputation: 1306

Actually title value is reactive and update by user input. According to vue class component docs you should not use arrow function in class component when you want to access this:

If you define an arrow function as a class property and access this in it, it will not work. This is because this is just a proxy object to the Vue instance when initializing class properties

So this will be work and the correct value logged in console:

@Component
export default class Home extends Vue {
  public title = ''

  send(): void {
    console.log(this.title)
  }
}

For further details visit this page.

Upvotes: 1

Related Questions