如何将 html 数据绑定到 vuejs 和 typescript 中的对象答案

【问题标题】：How to bind html data to an object in vuejs and typescript如何将 html 数据绑定到 vuejs 和 typescript 中的对象
【发布时间】：2020-05-28 19:47:56
【问题描述】：

如何创建接口或类并创建对象并将模板值分配给对象并在控制台上打印？

<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: '',
      }}
})

【问题讨论】：

你试过使用观察者吗？
使用v-model 应该会自动绑定数据对象属性上的输入值。

标签： javascript typescript vue.js vue-component typescript-typings

【解决方案1】：

v-model 应该自动绑定数据对象属性上的输入值。

要在更改时在控制台上打印值，您可以使用 vue watchers。

因为你使用的是类组件，所以可以使用vue-property-decorator包来创建观察者。

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)
  }
}

【讨论】：