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

Question

[beDenz]

Не могу понять, почему не срабатывают события 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>

Answer 1

[0xD34F]

Во-первых, потому что события вообще не срабатывают - никакие и никогда. Говорить "срабатывает событие" - безграмотно. Срабатывают обработчики событий. Во-вторых, значение вы меняете посредством клика по кнопке, а не вбиваете его в input. То есть, те события, которые вы ждёте - они не происходят, нечего обрабатывать.

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

<input v-model="text">

watch: {
  text(newVal, oldVal) {
    console.log(newVal, oldVal);
  },
},

Comments

[beDenz]

Этот вариант работает, но вы могли бы обьяснить почему события не срабатывают, я ведь не нативный DOM меняю, а локальный стейт

[0xD34F]

дополнил ответ

Answer 2

[Alex]

По событию @input необходимо Изменять значение поля text

changeInput: function(event) {
      console.log(event);
      this.text = event.target.value
    },

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

Comments

[beDenz]

проблема в том что событие не срабатывает, и данный метод даже не запустится

[Alex]

beDenz,

[Alex]

beDenz, Хм. Похоже я не так понял вопрос. Если вы хотите по клику на кнопку вызывать обработчик changeInput тогда читайте ответ 0xD34F