这是我的输入字段：
<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">
我正在使用change方法检查两个输入字段是否有一些值，然后计算它们。
data() {
return {
form: new Form({
sale_quantity: '',
sale_rate: '',
sale_total: '',
})
}
},
methods: {
computed() {
????
},
那么我的computed（）方法应该检查输入字段并计算它们以填充第三个输入字段？
如果你真的想保留你的表单对象，你需要编写自己的事件处理程序而不是使用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
}
}
}
虽然已经有一个已经接受的答案，但它的工作原理是计算属性的完美用例，应该使用它代替方法。
以下是工作示例。
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>我尝试做同样的事情，尝试一下我的情况下它对我有用:)
<input v-model="form.sale_quantity">
<input v-model="form.sale_rate" >
<input :value="form.sale_quantity*form.sale_rate" placeholder="Total Price">
Vue有事件处理程序，就像飞机有轮子一样。你为什么关心onchange？你应该考虑反应管道。您的sale_total输入应显示Sale_total的当前值，无论它是什么，无论何时上次更新。 sale_total应该在computed，而不是在你的商店。使用v-model作为输入，忘记onchange。有一天，您可能需要添加+和 - 按钮来增加数量。然后你会明白一个糟糕的混乱让你失望！
我需要操作几行并且每个控件的索引都有问题，这个例子帮助我解决了这个问题
HTML
<div id="app">
<table>
<thead align="left">
<th>Quantity</th>
<th>Price</th>
<th>Subtotal</th>
</thead>
<tbody>
<tr v-for="(item, index) in items">
<td><input v-model.number="item.qty" size="10"></td>
<td><input v-model.number="item.price" size="10"></td>
<td><input v-model.number="subtotalRow[index]" readonly size="10"></td>
<td><button @click="addRow(index)">+</button></td>
<td><button @click="removeRow(index)">-</button></td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td>{{total}}</td>
</tr>
</tbody>
</table>
</div>
JavaScript（vue.js）
var app = new Vue({
el: '#app',
data: {
// dummy data
items: [
{qty: 5, price: 25 },
{qty: 2, price: 16 },
{qty: 8, price: 320 },
{qty: 3, price: 88 }
],
},
computed: {
subtotalRow() {
return this.items.map((item) => {
return Number(item.qty * item.price)
});
},
total() {
return this.items.reduce((total, item) => {
return total + item.qty * item.price;
}, 0);
}
},
methods: {
addRow(index) {
this.items.splice(index + 1, 0, {
qty: 1, price: 0
});
},
removeRow(index) {
this.items.splice(index, 1);
}
}
});