I have one component that have one input, the input value indicates the unit of measurement, the measurements can be kilogram, gram, units, etc …
I have registered in the database
Kg = 0.1
g = 100
unit = 1
The type of input value, is selected from a select
so in my code I have:
<template>
<tr>
<td class="product-quantity">
<input
class="quantity no-round-input"
type="numeric"
v-model="item.quantity"
min="0"
@keypress="isNumber($event)"
/>
</td>
<td class="product-price">
<select
name="unit"
class="form-control"
v-model="item.attributes.unit"
>
<option v-bind:key="unit.id" v-for="unit in units" :value="unit.abr">
{{ unit.unit }}
</option>
</select>
</td>
</tr>
</template>
the value I get from props, so in my vue I have:
<script>
export default {
props: ["item"],
watch: {
'item.quantity' (){
if( (this.item.quantity - Math.floor(this.item.quantity)) !== 0 ){
this.item.quantity = this.item.quantity.toFixed(1);
}else{
this.item.quantity = this.item.quantity;
}
}
},
methods: {
isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();;
} else {
return true;
}
},
}
}
</script>
so, I just want that when v-model is Kg, the value input is in decimals, only decimals to Kg, so I implemented in propiety watch to observe input(item.quantity) but it’s not working, do you can help me please?