Quantity Changer Enhanced

This commit is contained in:
Devansh 2021-10-25 11:39:36 +05:30
parent db7bb755ac
commit 38fe64c0e7
4 changed files with 37 additions and 21 deletions

View File

@ -158,7 +158,14 @@
<span class="quantity-container">
<button type="button" class="decrease" @click="decreaseQty()">-</button>
<input :name="controlName" class="control" :value="qty" :v-validate="validations" data-vv-as="&quot;{{ __('shop::app.products.quantity') }}&quot;" readonly>
<input
ref="quantityChanger"
:name="controlName"
:model="qty"
class="control"
v-validate="validations"
data-vv-as="&quot;{{ __('shop::app.products.quantity') }}&quot;"
@keyup="setQty($event)">
<button type="button" class="increase" @click="increaseQty()">+</button>
@ -236,26 +243,30 @@
}
},
watch: {
quantity: function (val) {
this.qty = val;
mounted: function() {
this.$refs.quantityChanger.value = this.minQuantity;
},
this.$emit('onQtyUpdated', this.qty)
watch: {
qty: function (val) {
this.$refs.quantityChanger.value = val;
this.$emit('onQtyUpdated', this.qty);
}
},
methods: {
setQty: function({ target }) {
this.qty = parseInt(target.value);
},
decreaseQty: function() {
if (this.qty > this.minQuantity)
this.qty = parseInt(this.qty) - 1;
this.$emit('onQtyUpdated', this.qty)
},
increaseQty: function() {
this.qty = parseInt(this.qty) + 1;
this.$emit('onQtyUpdated', this.qty)
}
}
});

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,5 @@
{
"/js/velocity.js": "/js/velocity.js?id=5b0e7e5d2810ad90cde3",
"/js/velocity.js": "/js/velocity.js?id=bc96099cee58b3db618f",
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
"/css/velocity.css": "/css/velocity.css?id=9903eb7ca08caa5168e1",
"/js/velocity-core.js": "/js/velocity-core.js?id=5c0fe2bf195ee94576fd"

View File

@ -15,13 +15,14 @@
<button type="button" class="decrease" @click="decreaseQty()">-</button>
<input
:value="qty"
class="control"
ref="quantityChanger"
:name="controlName"
:v-validate="validations"
:model="qty"
class="control"
id="quantity-changer"
v-validate="validations"
:data-vv-as="`&quot;${quantityText}&quot;`"
readonly
@keyup="setQty($event)"
/>
<button type="button" class="increase" @click="increaseQty()">+</button>
@ -71,25 +72,29 @@ export default {
};
},
mounted: function() {
this.$refs.quantityChanger.value = this.minQuantity;
},
watch: {
quantity: function(val) {
this.qty = val;
qty: function(val) {
this.$refs.quantityChanger.value = val;
this.$emit('onQtyUpdated', this.qty);
}
},
methods: {
setQty: function({ target }) {
this.qty = parseInt(target.value);
},
decreaseQty: function() {
if (this.qty > this.minQuantity) this.qty = parseInt(this.qty) - 1;
this.$emit('onQtyUpdated', this.qty);
},
increaseQty: function() {
this.qty = parseInt(this.qty) + 1;
this.$emit('onQtyUpdated', this.qty);
}
}
};