I'm currently working with Vue to create a quantity selector component where users can increase or decrease input values. However, I am facing an issue where I need to disable the minus button when the value is zero or lower. Below is the HTML and JS code I've developed so far, but unfortunately, the alert and updateButtonDisabled() function are not functioning as expected.
Here's the HTML code with click functions:
<div class="input-group-prepend">
<span id="subButton" class="input-group-text" @click="decrement()">-</span>
</div>
<input v-model="form.quantity" type="number" class="form-control" id="Quantity" value="1" min="1" {% if product.variants.size == 1 %}max="{{ product.variants.first.inventory_quantity}}"{% endif %}>
<div class="input-group-append">
<span class="input-group-text" @click="increment()">+</span>
</div>
And here's the JS code along with data:
data(){
return {
form: {
id: document.getElementById('variant-id').value,
quantity: document.getElementById('Quantity').value
}
}
}
updateButtonDisabled(){
// If quantity is less than or equal to zero, disable the minus button
if(this.form.quantity <= 0) {
document.getElementById("subButton").setAttribute('disabled', 'disabled');
}
else {
document.getElementById("subButton").removeAttribute('disabled');
}
},
increment () {
this.form.quantity++
this.updateButtonDisabled();
},
decrement () {
if(this.form.quantity <= 0) {
alert('Negative quantity not allowed')
} else {
this.form.quantity--
}
this.updateButtonDisabled();
}
If anyone could provide assistance, it would be greatly appreciated. Thank you!