У меня есть watch и methods. Оба события привязаны к одному input.
После того как я нажимаю на input, то отрабатывает только watch, а methods не отрабатывает. Если же я убираю watch, то methods нормально работает. Я так понимаю, что watch имеет приоритет при вызове. Как я могу сделать так, чтобы methods имел приоритет перед 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>
