Как связать html данные с объектом в vuejs и машинописи - PullRequest
Новая
       10

Как связать html данные с объектом в vuejs и машинописи

0 голосов
/ 13 февраля 2020

Как создать интерфейс или класс и создать объект и назначить значения шаблона для объекта и распечатать его на консоли? 

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

1 Ответ

1 голос
/ 13 февраля 2020

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