In my parent component I have something similar to this,
<template>
<ProductCounter v-model="formData.productCount" label="product count" />
</template>
<script setup>
const initialFormData = {
productCount: null,
firstname: '',
surname: '',
phone: '',
email: '',
postcode: '',
submittedOnce: false,
errors: []
}
let formData = reactive({ ...initialFormData });
const clearUI = () => {
formData = reactive({ ...initialFormData });
triggerInlineForm.value = false;
}
</script>
My child component looks like this,
<template>
<div class="form__row" @reset-counts="resetCount">
<div class="counter__row">
<label>{{ label }}</label>
<div class="form__counter">
<button class="form__button--decrease form__button--circle form__button--animate-scale" :disabled="value == 0 || props.disabled" @click.prevent="decreaseCount()">
<i>
<FontAwesomeIcon :icon="['fal', 'minus']" />
</i>
</button>
<input type="text" v-model="value" :disabled="props.disabled" @input="updateQty" placeholder="0"/>
<button class="form__button--increase form__button--circle form__button--animate-scale" :disabled="props.disabled" @click.prevent="increaseCount()">
<i>
<FontAwesomeIcon :icon="['fal', 'plus']" />
</i>
</button>
</div>
</div>
</div>
</template>
<script setup>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
const emits = defineEmits(['update:modelValue', 'resetCounts']);
const props = defineProps({
label: {
type: String,
required: true
},
modelValue: {
type: String,
required: true,
default: 0
},
disabled: {
type: Boolean,
required: false
}
});
const value = ref(props.modelValue);
const updateQty = () => {
emits('update:modelValue', value.value)
}
const increaseCount = () => {
value.value++
emits('update:modelValue', value.value)
}
const decreaseCount = () => {
value.value--;
emits('update:modelValue', value.value)
}
</script>
I would expect that when clearUI is fired from the parent, and formData gets reset the v-model of ProductCounter should reflect that go back to 0 but it does not, where am I going wrong?