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

Пользователь

от carlo.cummerata , в категории: JavaScript , 2 месяца назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от dmitrypro77 , 2 месяца назад

@carlo.cummerata Используйте watchers чтобы отследить изменения в input поле в Vue.js, посмотрите ниже 2 примера (обычная переменная и вложенный объект), для вложенных объектов можно такэе использовать deep: true ниже пример как это работает:


 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>


Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.