如何计算两个输入值并将结果放在Vue，js中的另一个输入字段中? [英] How to calculate two input values and put the result in another input field in Vue,js?

问题描述

这是我的输入字段:

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

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

I am using on change method to check whether the two input fields have some values and then calculate them.

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

那么我应该用什么方法来检查输入字段并计算它们以填充第三个输入字段?

So what should be my computed() method to check the input fields and calculate them to fill in the third input field?

推荐答案

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

if you really want to keep your form object you'll need to write your own event handler instead of using 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:

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

这篇关于如何计算两个输入值并将结果放在Vue，js中的另一个输入字段中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！