如何在点击时更改服务器字段的值

Question

我有一个小表，当我单击添加将其添加到新行时，我的表中有一列，即Discount，该行用于每一行，但在表的外部，我有一个输入字段给折扣，我想要的是当我输入应该触发相应输入字段的任何折扣时，假设我给了10个折扣，那么它应该应用于折扣列中每行10个折扣

我的代码

Vue.component("form-row", {
  template: "#row-template",
  props: {
    itemname: String,
    quantity: Number,
    sellingprice: Number,
    discount: 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,
        discount: 0,
        amount: 55
      });
    },
    giveDiscount() {

      //here how I will asign the values in each discount row
    }
  },
  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>Discount</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">
    <input type="text">
    <button @click="giveDiscount">Discount</button>

  </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>
    <input class="form-control text-right" type="number" min="0" step=".5" v-model="discount" />
    </td>
    <td>
      <input readonly class="form-control text-right" type="number" min="0" step="1" :value="amountSynced" />
    </td>
  </tr>

</script>

我提供了一个带有按钮的输入字段，最初每行的折扣为0，但我想为他们提供我在输入字段中键入的值。

我只想更改折扣列的所有行字段

Answer 1

如果我对您的理解正确，则需要通过折价减少总价值。但是您没有bind带有任何变量的折扣输入。看看这个：

Vue.component("form-row", {
  template: "#row-template",
  props: {
    itemname: String,
    quantity: Number,
    sellingprice: Number,
    discount: 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) - parseFloat(this.discount));
      return this.amount
    }
  }
});

new Vue({
  el: "#app",
  data() {
    return {
      tableDatas: [],
      discount: ""
    };
  },
  methods: {
    btnOnClick(v) {
      this.tableDatas.push({
        itemname: "item",
        quantity: 1,
        sellingprice: 55,
        discount: +this.discount,
        amount: 55
      });
    },
    giveDiscount() {
      this.tableDatas = this.tableDatas.map(item => {
        return {...item, discount: +this.discount}
      })
    }
  },
  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>Discount</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">
    <input type="text" v-model="discount">
    <button @click="giveDiscount">Discount</button>

  </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>
    <input class="form-control text-right" type="number" min="0" step=".5" v-model="discount" />
    </td>
    <td>
      <input readonly class="form-control text-right" type="number" min="0" step="1" :value="amountSynced" />
    </td>
  </tr>

</script>