Как отследить изменение input в Vue.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<template>
  <div>
    <form>
      <label for="firstname">Имя:</label>
      <input id="firstname" v-model="first_name" type="text" />
      <!-- Если вложенный объект -->
      <input v-model="forms.first_name" type="text" />
    </form>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data: () => ({
    forms: {
      first_name: '',
    },
    first_name: '',
  }),
  watch: {
    'forms.first_name'(value) {
      // Новое forms.first_name значение
      console.log(value)
    },
    first_name(value) {
      // Новое first_name значение
      console.log(value)
    },
  },
}
</script>