@beDenz

Почему не срабатывают события change и input после изменения значения value в input?

Не могу понять, почему не срабатывают события change и input если я меняю value не вручную, а методом. Ниже дан примерный код. После нажатия на кнопку значение value меняется, но событие не срабатывает.

<template>
  <div>
    <input type="text" :value="text" @input="changeInput" />
    <div @click="mychange">Button</div>
  </div>
</template>

<script>
export default {
  name: "Input",
  data() {
    return {
      text: "default"
    };
  },
  methods: {
    changeInput: function() {
      console.log("change");
    },
    mychange: function() {
      console.log("button");
      this.text = "not default";
    }
  }
};
</script>
  • Вопрос задан
  • 1682 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Во-первых, потому что события вообще не срабатывают - никакие и никогда. Говорить "срабатывает событие" - безграмотно. Срабатывают обработчики событий. Во-вторых, значение вы меняете посредством клика по кнопке, а не вбиваете его в input. То есть, те события, которые вы ждёте - они не происходят, нечего обрабатывать.

Хотите следить за любыми изменениями значения - используйте v-model + watch:

<input v-model="text">

watch: {
  text(newVal, oldVal) {
    console.log(newVal, oldVal);
  },
},
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега Vue.js
Thinking about a11y
По событию @input необходимо Изменять значение поля text
changeInput: function(event) {
      console.log(event);
      this.text = event.target.value
    },


Или использовать v-model — он делает точно то же самое, только под капотом
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы