How to bind html data to an object in vuejs and typescript

Question

How to create interface or class and create object and assign the template values to object and print it on console?

<template> 
<input type="text" id="name" v-model="name" placeholder="name">
<input type="email" id="email" v-model="email" placeholder="email">
</template>

@Component({

})
export default class example extends Vue({
   data(
       return {
              name: '',
              email: '',
      }}
})

Answer 1

v-model should automatically bind the input values on the data object properties.

To print the value on the console when changed, you can use vue watchers.

Because you are using class components, you can use the vue-property-decorator package to create watchers.

import { Component, Watch } from 'vue-property-decorator'

@Component
export default class example extends Vue {
  name = ''
  email = ''

  @Watch('name')
  onNameChanged(val: string, oldVal: string) {
    console.log('name': val)
  }

  @Watch('email')
  onEmailChanged(val: string, oldVal: string) {
    console.log('email': val)
  }
}