Блог

Я использую vue и debounce для автоматического сохранения моих текстовых полей после 3 секунд отсутствия ввода моих пользователей. Способ, которым я запускаю debounce, основан на @input событии в каждом из текстовых полей. v-model Для всех текстовых полей заполняется из вызываемого vuex вычисляемого средства получения currentItem .

Когда страница загружается, действие, которое заполняет currentItem , отправляется и currentItem получает данные из действия. Это вызывает @input событие, и, следовательно, моя функция debounce срабатывает через 3 секунды после загрузки страницы.

Как я могу предотвратить запуск @input события при загрузке страницы в этой ситуации или найти обходной путь здесь?

Довольно озадаченный тем, что попробовать, похоже, что любой маршрут, по которому я иду, я столкнусь с тем же затруднительным положением.

 <div class="col-6 q-pa-sm">
  <q-input
    v-model="currentItem.imageUrl"
    @input="putItem"
    label="Image URL"
    outlined>
  </q-input>
</div>
 

 putItem() {
  this.savingStatus = "Saving changes...";
  this.debounceItem();
},
 

 debounceItem: debounce(function() {
   this.$axios
      .put(`/v1/items/${this.currentItem.id}`, this.currentItem)
      .catch(error => {
         this.showSnackbarError(error);
       })
      }
}, 1000),