Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question