Ensuring the total weight of the products remains accurate when changing the unit of measurement is essential. Currently, although the data in the array is being updated, these changes are only reflected on the screen after clicking on other input fields.
The table displays data from the array including Product name, net weight, and quantity. A select option allows users to choose the unit of measure - kg or grams, determining the units for "net weight" based on a conversion coefficient from another array.
Despite updating the data upon changing the unit of measure using the unitChange function, the screen fails to display these adjustments. Even attempting to implement a computed function did not solve the issue.
If you're experiencing this problem too, check your HTML code:
<tr v-for="(comp, i) in st">
<td>{{comp.name}}</td>
<td>
<input v-model.number="comp.weight_netto">
</td>
<td>
<select @change="unitChange($event.target.value, i)" v-model="comp.unit_id">
<option v-for="val in ul" :value="val.unit_id" v-text="val.name" ></option>
</select>
</td>
<td>
<input v-model.number="comp.quantity">
</td>
<td>{{itemqty(i)}}</td>
</tr>
To resolve this issue in your JavaScript code, make sure your methods are correctly defined:
methods: {
unitChange(value, i){
for (var j=0; j<this.ul.length; j++){
if (this.ul[j].unit_id==value){
this.st[i].conversion_num=this.ul[j].conversion_num;
break;
}
}
},
itemqty(i){
return (this.st[i].weight_netto*this.st[i].quantity)/this.st[i].conversion_num;
}
}