Есть ли способ прекратить запуск методов просмотра vuejs, когда значение изменяется самим методом?

Question

watch: {
        alert() {
          setTimeout(() => {
            this.alert = "";
          }, 4000);
        }
      }

Здесь метод оповещения сначала запускается DOM и снова запускается при изменении значения методом. есть ли способ прекратить повторять?

Моя цель здесь - проверить, изменилось ли значение 'alert', и если оно изменилось, я хочу сбросить значение через 4 с, а также посчитать, сколько раз оно было изменено.

Answer 1

Следуя совету Роя J, попробуйте поместить обработчик change в DOM вместо использования наблюдателя.

new Vue({
  el: '#app',

  data() {
    return {
      alert: '',
      alertCounter: 0,

      resetTimeoutId: null,
      resetTimeoutDelay: 1000, // 4000
    }
  },

  methods: {
    reset() {
      this.incrementAlertCounter()
      this.handlePreviousResetTimeout()
      this.resetTimeoutId = setTimeout(() => {
        this.alert = ''
      }, this.resetTimeoutDelay)
    },

    handlePreviousResetTimeout() {
      if (!this.resetTimeoutId) return
      clearTimeout(this.resetTimeoutId)
    },

    incrementAlertCounter() {
      this.alertCounter += 1
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input v-model="alert" type="text" @change="reset">
  <span>{{ alertCounter }}</span>
</div>