vue.js - Vue.js 更改选择选项后如何重新计算显示的数据？

Question

任务 - 更改计量单位时，请考虑产品的总重量。现在数组中的数据正在发生变化，但是只有在单击其他输入字段时才会在屏幕上显示新数据

有一个包含数组数据的表格，其中包含以下字段：产品名称、净重、数量。表中有一个选择测量单位 - 公斤，克，以便了解为每个值设置的“净重”单位有一个来自单独数组的转换系数conversion_num

现在，当更改测量单位时，会启动 unitChange 函数，该函数会更改数组中的数据，但更改不会显示在屏幕上。我尝试使用计算函数，它的工作原理相同。

我究竟做错了什么？

HTML：

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

JS：

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

标签： vue.jsvuejs2

Answer 1

不要改变你的产品！

您最终会遇到舍入错误：由于两次舍入，从一个单位更改为另一个单位并返回初始值将导致与初始值不同的值。
它也让你的事情变得更加困难，因为你想在任何地方使用产品，你必须考虑到它的当前单位。

一个更简洁的解决方案是保持重量和单位不变（以您选择的单位）并使用一种方法来根据当前选择的单位解析显示的值。

您的产品保持不变（重量值或重量单位都不会改变）。

概念证明：

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  data: () => ({
    products: [
      { id: 1, name: 'one', weight: 20},
      { id: 2, name: 'two', weight: 17}
    ],
    units: [
      {label: 'kgs'},
      {label: 'lbs', factor: 2.20462},
      {label: 'oz', factor: 35.274}
    ],
    currentUnit: {label: 'kgs'}
  }),
  methods: {
    convertToUnit(weight) {
      return (Math.round(weight * (this.currentUnit.factor || 1) * 100) / 100) +
        this.currentUnit.label
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Current unit:
  <select v-model="currentUnit">
    <option v-for="(unit, key) in units" :value="unit" :key="key">{{ unit.label }}</option>
  </select>
  <div v-for="(product, k) in products" :key="k">
    name: <span v-text="product.name"></span>, 
    weight: <span v-text="convertToUnit(product.weight)"></span>
  </div>
</div>