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

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

- Philipp Kishkovarov

---

你可能需要更详细地描述你想要的行为。你是说你希望新的输入出现，直到用户通过填写它们来使用所有点吗？ - Roy J

@RoyJ 好的，我在我的帖子中做了一些更改，希望更好地描述了情况。 - Philipp Kishkovarov

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

在这个fiddle中可以看到它的实际效果：https://jsfiddle.net/ebbishop/vu508Lgc/

这并不能处理用户减少总点数的情况。（用户总共有60分，然后将三个点数值都设置为20。如果用户将总分数更改为40，那么加起来为60的输入会发生什么？）

- ebbishop

Answer 2

你需要一个计算属性来跟踪剩余点数。当还有剩余点数时，你需要一个函数来向数组添加元素。你需要连接一个观察者来调用该函数。下面的代码片段就是这样做的。

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>

- Roy J

---

哦，那看起来就是我要找的！我现在要试一下。谢谢。 - Philipp Kishkovarov