Vue,js中如何计算两个输入值并将结果放入另一个输入字段中？

Question

这是我的输入字段：

<input v-model="form.sale_quantity" @change="computed" type="number" class="form-control" name="sale_quantity" id="sale_quantity" placeholder="Quantity">

<input v-model="form.sale_rate" @change="computed" type="number" step="any" class="form-control" name="sale_rate" id="sale_rate" placeholder="Rate">

<input v-model="form.sale_total" type="number" step="any" class="form-control" name="sale_total" id="sale_total" placeholder="Total Price">

我正在使用 onchange 方法来检查两个输入字段是否有一些值，然后计算它们。

data() {
    return {                
        form: new Form({
            sale_quantity: '',
            sale_rate: '',
            sale_total: '',
        })
    }
},
methods: {              
    computed() {
        //computation here
    }
}

那么我的compute()方法应该是什么来检查输入字段并计算它们以填充第三个输入字段？

Answer 1

如果您确实想保留表单对象，您需要编写自己的事件处理程序而不是使用v-model

https://jsfiddle.net/575dtfqz/1/

<input :value="form.sale_quantity" @change="updateQuantity" type="number" class="form-control" name="sale_quantity" id="sale_quantity" placeholder="Quantity">
<input :value="form.sale_rate"  @change="updateRate" type="number" step="any" class="form-control" name="sale_rate" id="sale_rate" placeholder="Rate">
<input v-model="form.sale_total" type="number" step="any" class="form-control" name="sale_total" id="sale_total" placeholder="Total Price">

javascript:

methods: {
    updateQuantity(event) {
        this.form.sale_quantity = event.target.value
        this.form.sale_total = this.form.sale_quantity * this.form.sale_rate
    },
    updateRate(event) {
        this.form.sale_rate = event.target.value
        this.form.sale_total = this.form.sale_quantity * this.form.sale_rate
    }
}

Answer 2

尽管已经有一个可接受的答案并且它有效，但这是计算属性的完美用例，应该使用它而不是方法。

下面是工作示例。

new Vue({
  el: "#el",
  data() {
    return {
      form: {
        sale_quantity: 0,
        sale_rate: 0,
        sale_total: 0
      }
    }
  },
  computed: {
    total: function() {
      let calculatedTotal = this.form.sale_quantity * this.form.sale_rate;
      this.sale_total = calculatedTotal;
      
      return calculatedTotal;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="el">
  <input v-model="form.sale_quantity" type="number" class="form-control" name="sale_quantity" id="sale_quantity" placeholder="Quantity">
  <input v-model="form.sale_rate" type="number" step="any" class="form-control" name="sale_rate" id="sale_rate" placeholder="Rate">
  <input :value="total" type="number" step="any" class="form-control" name="sale_total" id="sale_total" placeholder="Total Price">
  <br>
  Total: {{sale_total}}
</div>