javascript - 如何计算动态创建的元素内的值

Question

我在单击按钮时在 HTML 表格中创建输入字段并想做一些计算，但它并没有按我的意愿发生，我正在研究 vue.js

我做了什么

new Vue({
  el: '#app',
  data() {
    return {
      tableDatas: []

    }
  },
  methods: {
    btnOnClick(v) {
      this.tableDatas.push({
        itemname: 'item',
        quantity: 1,
        sellingprice: 55,
        amount: 0,
      });
    },
    calculateQty(tableData) {
      let Amount = parseFloat(tableData.quantity) * parseFloat(tableData.sellingprice)

      if (!isNaN(Amount)) {
        tableData.amount = Amount.toFixed(2);
        console.log(tableData.quantity)

      }
    },
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.5/vue.js"></script>
<div id="app">
  <button type="button" @click="btnOnClick">Add</button>
  <table class="table table-striped table-hover table-bordered mainTable" id="Table">
    <thead>
      <tr>

        <th class="itemName">Item Name</th>
        <th>Quantity</th>
        <th>Selling Price</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(tableData, k) in tableDatas" :key="k">

        <td>
          <input class="form-control" readonly v-model="tableData.itemname" />
        </td>
        <td>
          <input class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.quantity" v-on:keyup="calculateQty(tableData)" />
        </td>
        <td>
          <input class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.sellingprice" v-on:keyup="calculateSPrice(tableData)" />
        </td>
        <td>
          <input readonly class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.amount" />
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <label>Total Row's Amount</label>
    <input type="text" disabled>
  </div>
</div>

因此，当我创建一行时，我想计算我创建的每个相应行的数量，我正在使用普通 javascript 进行计算，接下来假设我创建了 5 行想要在 total Row 的 Amount 字段中显示总金额

当我在 quantity 字段中键入任何内容时，我正在进行计算，但是当我按下 back space 时，金额不会设置为 0 我必须为此键入 0，默认情况下quantity 字段的值为 1。我正在使用普通的 javascript 来完成这一切我只是想知道如何使用 vue.js 来使它更容易和更简单

Answer 1

new Vue({
  el: "#app",
  data() {
    return {
      tableDatas: []
    };
  },
  methods: {
    btnOnClick(v) {
      this.tableDatas.push({
        itemname: "item",
        quantity: 1,
        sellingprice: 55,
        amount: 0
      });
    }
  },
  computed: {
    calculate() {
      return (
        this.tableDatas
        .map(tableData => {
          return tableData.amount = (
            parseFloat(tableData.quantity) *
            parseFloat(tableData.sellingprice)
          );
        })
        .reduce((total, current) => total + current, 0) || 0
      );
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button type="button" @click="btnOnClick">Add</button>
  <table class="table table-striped table-hover table-bordered mainTable" id="Table">
    <thead>
      <tr>
        <th class="itemName">Item Name</th>
        <th>Quantity</th>
        <th>Selling Price</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(tableData, k) in tableDatas" :key="k">
        <td>
          <input class="form-control" readonly v-model="tableData.itemname" />
        </td>
        <td>
          <input class="form-control text-right" type="number" min="0" step="1" v-model="tableData.quantity" />
        </td>
        <td>
          <input class="form-control text-right" type="number" min="0" step=".5" v-model="tableData.sellingprice" />
        </td>
        <td>
          <input readonly class="form-control text-right" type="number" min="0" step="1" v-model="tableData.amount" />
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <label>Total Row's Amount</label>
    <input type="text" disabled :value="calculate">
  </div>
</div>

编辑:

我尽情发挥我的想象力，我也用组件做到了:

Vue.component("form-row", {
  template: "#row-template",
  props: {
    itemname: String,
    quantity: Number,
    sellingprice: Number,
    amount: Number
  },
  computed: {
    quantitySynced: {
      get() {
        return this.quantity;
      },
      set(v) {
        this.$emit("update:quantity", +v);
      }
    },
    sellingpriceSynced: {
      get() {
        return this.sellingprice;
      },
      set(v) {
        this.$emit("update:sellingprice", +v);
      }
    },
    amountSynced() {
      this.$emit("update:amount", parseFloat(this.quantity) * parseFloat(this.sellingprice));
      return this.amount
    }
  }
});

new Vue({
  el: "#app",
  data() {
    return {
      tableDatas: []
    };
  },
  methods: {
    btnOnClick(v) {
      this.tableDatas.push({
        itemname: "item",
        quantity: 1,
        sellingprice: 55,
        amount: 55
      });
    }
  },
  computed: {
    calculate() {
      return (
        this.tableDatas.reduce((total, {amount}) => total + amount, 0) || 0
      );
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button type="button" @click="btnOnClick">Add</button>
  <table class="table table-striped table-hover table-bordered mainTable" id="Table">
    <thead>
      <tr>
        <th class="itemName">Item Name</th>
        <th>Quantity</th>
        <th>Selling Price</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <form-row v-for="(row, key) in tableDatas" :key="key" v-bind.sync="row"></form-row>
    </tbody>
  </table>
  <div>
    <label>Total Row's Amount</label>
    <input type="text" disabled :value="calculate">
  </div>
</div>

<script type="text/x-template" id="row-template">
  <tr>
    <td>
      <input class="form-control" readonly :value="itemname" />
    </td>
    <td>
      <input class="form-control text-right" type="number" min="0" step="1" v-model="quantitySynced" />
    </td>
    <td>
      <input class="form-control text-right" type="number" min="0" step=".5" v-model="sellingpriceSynced" />
    </td>
    <td>
      <input readonly class="form-control text-right" type="number" min="0" step="1" :value="amountSynced" />
    </td>
  </tr>
</script>