@noxeone

VUE Как пересчитать отображаемые данные после изменения select-option?

Задача - при изменении единицы измерения считать общий вес продуктов.
Сейчас в массиве данные меняются, но на экране отображаются новые данные только при клике на другие input поля

Есть таблица с данными из массива, с полями: Имя товара, вес нетто, количество.
В таблице есть select с выбором единицы измерения - кг, грамм, чтобы понять в каких единицах задается "вес нетто"
к каждому значению есть коэффециент конверсии conversion_num из отдельного массива

Сейчас при смене единицы измерения запускается функция unitChange, которая меняет данные в массиве, но изменения не отображаются на экране.
Пробовал через computed, получается то же самое.

Что не так делаю?

<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;
 }
}
  • Вопрос задан
  • 256 просмотров
Решения вопроса 2
Aetae
@Aetae Куратор тега Vue.js
Тлен
Мужик, мои глаза кровоточат.

Common sense:
1. Используй нормальные "говорящие" имена переменных.
2. Используй camelCase.
3. Используй пробелы.
4. Используй редактор(ide) с номальным форматированием кода.

Vue:
1. Не используй методы для отображаемых данных - используй computed.
2. Не используй вычисления в v-for - используй computed в котором заранее подготовь массив с данными в необходимом для отображения формате.

Конкретно по вопросу: недостаточно данных - что и как у тебя лежит в data?
Налицо проблема с реактивностью, возможно в "st" данные кладутся через зад и реактивность не навешивается. Возможно у объектов нет изначально свойства "conversion_num" или какого иного, а добавленные на лету свойства не реактивны и надо использовать this.$set(Vue.set).
Ответ написан
@noxeone Автор вопроса
РЕШЕНО!
Проблема была в навешивании реактивности, просто переписал способ укладки данных в массив, теперь все работает. Всем спасибо!
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@art055
Может быть value.length ?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы