I've been working on this for almost three days now.
My goal is to create a reusable component in Vue that allows a passed value to be incremented and decremented with the click of a button, and then submitted in a form. Below is my code:
Parent Component
<controlinput name="rooms" v-model.number="form.rooms">How many rooms are in the place? </controlinput>
<controlinput name="toilet" v-model.number="form.toilet">How many toilets are in the place? </controlinput>
data() {
return {
form: {
rooms: 0,
toilet: 0,
},
}
},
Child Component
<div class="control">
<button type="button" class="control-button" @click="decreaseNumber"><img src="~/assets/svg/minus.svg" alt="-"/></button>
<div class="control-content">
{{value}}
</div>
<button type="button" class="control-button" @click="increaseNumber"><img src="~/assets/svg/plus.svg" alt="+"/></button>
</div>
props: {
value: {
default: 0
}
},
methods: {
decreaseNumber() {
console.log('decrease button clicked');
console.log(this.value--);
},
increaseNumber() {
console.log('increase button clicked');
console.log(this.value++);
}
},
Any help would be greatly appreciated. Thank you!