如何为动态输入设置最大值？

Question

我有动态输入的 vue 表单。

第一个。用户在表格中注册总股数
第二。他开始通过根据需要添加动态输入来部分向股东发行这一总额
第三他提交表格。
我的任务是避免问题过多。

我不知道如何避免向股东发行的股份超过其注册总额/

Ex:
totalSharesAmount = 100
shareholder[0] - shares_amount = 50 
shareholder[1] - shares_amount = 20 //70 total
shareholder[2] - shares_amount = 30 //100 total. can't be more than 100

我的数据：

data() {
return {
    totatSharesAmount: 100
    shareholders: [{share_amount: '', share_price: ''}]
    }
}

我的验证方法（计算），在这里我需要帮助：

sharesToFounders() {
    return {
      required: true,
      max_value: this.totalSharesAmount - this.shareholder['shares_amount'] //need help here
   }
}

Answer 1

一种解决方法：跟踪当前总数，并在输入时使用验证器方法来允许或阻止用户更改。

标记：

<div id="app">
  <div class="row"><span>Total:</span><input type="number" v-model="totalPoints"></div>
  <div v-for="(item, index) in foundersPoints" class="row">
    <input type="number" v-on:input="updateValue(index)" v-model="foundersPoints[index].points_amount"><span v-if="foundersPoints[index].alert" class="alert">{{foundersPoints[index].alert}} <button v-on:click="dismissAlert(index)">OK</button></span>
  </div>
</div>

验证器方法：

updateValue(idx) {
    let value;
    if (this.tempSum > this.totalPoints) {
    const overage = this.totalPoints - this.tempSum;
    value = Number(this.foundersPoints[idx].points_amount) + overage;
  } else {
    value = Number(this.foundersPoints[idx].points_amount);
  }
  this.foundersPoints[idx].points_amount = value;
},

用于跟踪的当前总计（计算属性）：

computed: {
  tempSum() {
    const pointsAmounts = this.foundersPoints.map(item => Number(item.points_amount));
    return pointsAmounts.reduce((acc, t) => acc + Number(t), 0);
  }
},

在这个小提琴中看到它的实际效果：https://jsfiddle.net/ebbishop/vu508Lgc/

这不处理用户减少允许的总分的情况。 （用户有总计 = 60，然后将三个点值中的每一个设置为 20。如果用户随后将总计更改为 40，那么加起来为 60 的输入会发生什么情况？）

Answer 2

您需要一个计算来跟踪剩余点。当有剩余点时，您需要一个函数将元素添加到数组中。您需要连接 watcher 来调用该函数。下面的 sn-p 就是这样做的。

new Vue({
  el: '#app',
  data() {
    return {
      totalPoints: 100,
      foundersPoints: []
    };
  },
  methods: {
    addPoint() {
      this.foundersPoints.push({
        points_amount: null,
        point_price: null
      });
    }
  },
  watch: {
    remainingPoints: {
      handler(v) {
        if (v > 0 && this.pointValues.every((v) => v > 0)) {
          this.addPoint();
        }
        if (v <= 0 || isNaN(v)) {
          // Remove any zeros, probably just the last entry
          this.foundersPoints = this.foundersPoints.filter((o) => o.points_amount > 0);
        }
      },
      immediate: true
    }
  },
  computed: {
    pointValues() {
      return this.foundersPoints.map((o) => o.points_amount);
    },
    remainingPoints() {
      const used = this.pointValues.reduce((a, b) => a + b, 0);

      return this.totalPoints - used;
    }
  }
});

:invalid {
  border: solid red 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="p in foundersPoints">
    <input v-model.number="p.points_amount" type="number" min="1" :max="p.points_amount + remainingPoints">
  </div>
  <div>Remaining shares: {{remainingPoints}}</div>
</div>