N
N
noxeone2020-06-15 23:26:22
Vue.js
noxeone, 2020-06-15 23:26:22

VUE How to recalculate display data after select-option change?

The task is to read the total weight of products when changing the unit of measurement.
Now the data in the array is changing, but the screen displays new data only when you click on other input fields.

There is a table with data from the array, with the fields: Product name, net weight, quantity.
The table has a select with a choice of units of measurement - kg, grams, in order to understand in which units the "net weight" is set
; for each value there is a conversion factor conversion_num from a separate array

Now, when changing the unit of measurement, the unitChange function is launched, which changes the data in the array, but the changes are not displayed on the screen.
Tried through computed, it turns out the same.

What am I doing wrong?

<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>

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;
 }
}

Answer the question

In order to leave comments, you need to log in

3 answer(s)
N
noxeone, 2020-06-17
@noxeone

RESOLVED!
The problem was in hanging reactivity, I just rewrote the way data was put into an array, now everything works. Thanks to all!

S
segio_tt, 2020-06-16
@art055

Maybe value.length ?

A
Aetae, 2020-06-16
@Aetae

Man, my eyes are bleeding.
Common sense:
1. Use normal "speaking" variable names.
2. Use camelCase.
3. Use spaces.
4. Use an editor(ide) with normal code formatting.
Vue:
1. Don't use methods on rendered data - use computed.
2. Do not use calculations in v-for - use computed in which prepare an array with data in advance in the format necessary for display.
Specifically on the question: there is not enough data - what and how do you have in data?
There is a problem with reactivity, perhaps in "st" the data is put through the back and reactivity is not hung. Perhaps the objects do not initially have the "conversion_num" property or some other, and the properties added on the fly are not reactive and this.$set(Vue.set) should be used.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question