JS Pricebreak计算器。从数量中查找数组值

Question

您好，我正在vue.js中创建一个丝网印刷价格计算器

我正在使用的对象的简化版本

data() {
    return {
      qty: 0,
      breaks: [12, 24, 36, 100],
      matrix: [10, 9, 8, 7],
      pricePer: 0, 
      total: 0 // (pricePer * qty)
    };
},

我有一个更改qty值的输入。 “中断”对象是数量阈值。

因此，如果用户输入的数量少于12（“ breaks”数组中的第一个值，则应该出现错误，因为丝网印刷的最小值为12

“矩阵”数组是每件衬衫的价格

所以我需要一个功能

1. 获取数量并在breaks数组中找到最接近的值的索引

2. 使用该索引在“矩阵”数组中查找每件衬衫的价格

---

完成后，将会有更多变量计算价格。

（数量，单面/双面，打印的颜色数量）

但是，如果我能对如何使用该函数有所了解，那么我应该可以将其应用于计算器的其余部分。

这是我第一次在这里发帖，谢谢！！！

Answer 1

由于您正在使用vue.js，因此可以在watchers下添加该方法。所以你可以有这样的东西

watch: {
  qty (val) {
    if (val > 11) {
      let res = 0;
      // The block gets the nearest value in the breaks array
      let arr = this.breaks;
      let diff = Math.abs(arr[0] - val);
      for (let i = 0; i < arr.length-1; i++) {
        if (val == arr[i]) {
          res = i;
        }

        if (Math.abs(arr[i] - val) < diff) {
          res = i
        }
      }
      // Price per shirt will be the value at index of i
      let PPS = this.matrix[i];
    }
  }
}

我希望这对您有帮助