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

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

data() {
            return {

                form: new Form({

                    sale_quantity: '',
                    sale_rate: '',
                    sale_total: '',
                })
            }
        },
methods: {

            computed() {
                   ????
                },

那么我的computed（）方法应该检查输入字段并计算它们以填充第三个输入字段？

Answer 1

虽然已经有一个已接受的答案，但它有效，这是计算属性的完美用例，应该使用它代替方法。

以下是工作示例。

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>

Answer 2

我试着做同样的事情，尝试一下我的情况它对我有用：）

<input v-model="form.sale_quantity">

<input v-model="form.sale_rate" >

<input :value="form.sale_quantity*form.sale_rate" placeholder="Total Price">

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

Answer 3

如果您真的想保留表单对象，则需要编写自己的事件处理程序而不是使用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 4

Vue有事件处理程序，就像飞机有轮子一样。你为什么关心onchange？你应该考虑反应管道。您的sale_total输入应显示Sale_total的当前值，无论它是什么，无论何时上次更新。 sale_total应该在computed，而不是在您的商店。使用v-model作为输入，忘记onchange。有一天，您可能需要添加 + 和 - 按钮来增加数量。然后你会感激到一个糟糕的混乱让你离开了！

Answer 5

我需要操作几行，并且每个控件的索引都有问题，这个示例为我解决了很多问题

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

请参见https://jsfiddle.net/h5swdfv5/1/

中的示例

由 smarx https://stackoverflow.com/a/45425666/4191716

回答

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

5 个答案: