V
V
Vladislav Dudashvili2021-06-05 11:44:47
Vue.js
Vladislav Dudashvili, 2021-06-05 11:44:47

How can I make methods take precedence over watch?

I have watch and methods. Both events are bound to the same input.
After I click on the input, only watch works, and methods does not work. If I remove watch, then methods works fine. I understand that watch takes precedence when called. How can I make methods take precedence over watch?

<template>
  <div class="v-amount">
    <label for="money">Amount {{ $store.state.underlying }}</label>
    <input
      type="number"
      min="0"
      name="money"
      placeholder="0"
      @input="throttledSave" 
      class="w-full border border-gray-300 px-3 py-2 rounded-lg shadow-sm focus:outline-none focus:border-gray-300 focus:ring-1 focus:ring-gray-300"
      v-model="amountCount"
    />
    <div class="absolute top-0 left-0 mt-3 ml-1 text-gray-400"></div>
    <span class="text-sm text-red-600 hidden" id="error"></span>
  </div>
</template>

<script>
import throttle from "../../../throttle.js";

export default {
  name: "v-amount",

    props: {
    modelValue: {
      type: Number,
      default: 0
    },
  },

  data() {
    return {
      amountCount: this.modelValue,
      timerId: null,
    };
  },

    watch: {
    amountCount() {
      this.$emit("upAmount", Number(this.amountCount));
      this.$emit("update:modelValue", Number(this.amountCount));
    },

    modelValue(newValue) {
      this.amountCount = newValue
    },
    
  },


  methods: {
    throttledSave() {
      let DELAY = 1000; // Задержка

      clearTimeout(this.timerId)
      this.timerId = setTimeout(() => {
        this.$emit("upAmount", this.amountCount);
      }, DELAY);
    },
  }, 


  
};
</script>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question