防止数组在文本输入上循环并从该数组中提取值Vue

Question

我要设法掌握Vue，并在过去的几天中试图将一个项目进行汇总，该项目根据用户输入进行2次计算，显示结果并更改数组。

计算1：单位= variantName.qty * packageQty 计算2：packageQuantity =单位总和

尽管有很多问题，我还是设法创建了可行的东西。

问题之一是，每当我在“包装数量”输入中输入新值时，它就会创建一个无尽的数组-复制结果。

第二个问题是我无法从数组中检索totalQuantity值。

如何停止无休止的数组并从数组中检索并显示totalQuantity键。

我还创建了一个JSbin，使内容看起来更容易。

谢谢。

这是HTML：

<div id="app">
       <ul>
           <div class="table-wrapper">
            <table class="table table-hovered">
              <thead>
                <tr>
                  <th>SKU</th>

                  <th>Total Quantity</th>
                </tr>
              </thead>

                <template v-for="item in sites">
                  <tbody>
                  <tr class="bg-primary">
                    <td>{{ item.sku }}</td>
                    <td>{{ item.totalQuantity }}</td>
                  </tr>
                  </tbody>
                  <template>
                    <thead>
                    <tr>
                    </tr>
                    <th>
                      Variation Name
                    </th>
                    <th>
                      Package Quantity
                    </th>
                    <th>
                      Units
                    </th>
                   </thead>
                   <template v-for="subitem in item.values">
                    <tbody>
                     <tr>
                      <td>
                       Unpackaged
                      </td>
                      <td>
                        <input
                               id="packageQty"
                               v-model="subitem.packageQty"
                               type="number"
                               class="form-control"
                               name="packageQty"
                               placeholder=""
                               @input="addEvent"
                               @change="addEvent"
                          />
                        </td>
                        <td>
                          {{ subitem.packageQty * subitem.variationName.qty }}
                        </td>
                        </tr>
                       </tbody>
                   </template>
                  </template>
                 </template>
              </tbody>
            </table>
    </div>

这是Javascript：

new Vue({
  el: '#app',
  data: {
     sites: [
      {
        sku: "10001",
        totalQuantity: "",
        values: [
          {
            variationName: { name: "Unpackaged", qty: 1 },
            units: "",
            packageQty: 10,
          }
        ]
      },
      {
        sku: "10002",
        supplierProductCode: "iB004N",
        totalQuantity: "",
        values: [
          {
            variationName: { name: "2 Pack", qty: 2 },
            units: "",
            packageQty: 10,    
          },
          {
            variationName: { name: "4 Pack", qty: 4 },
            units: "",
            packageQty: 10,
          }
        ]
      }
    ],
    events: [],
    result: [],
    newResult: [],
    },
    methods: {
      addEvent ({ type, target }) {
        const result = []
        for (const site of this.sites) {
        this.result.push({
          sku: site.sku,
          totalQuantity: site.totalQuantity,
          values: site.values.map(function(item) {
            return {
              units: item.variationName.qty * item.packageQty,
              variationName: { name: item.variationName.name, qty: item.variationName.qty },
              packageQty: parseFloat(item.packageQty),
            };
          })
        });
        }
      const newResult = [];
      for (const res of this.result) {
        let s = res.values.map((items2, _) => {
          return items2.units;
        });
        let sum = s.reduce((a, b) => a + b);
        this.newResult.push({
          sku: res.sku,
          totalQuantity: sum,
          values: res.values
        });
        console.log(this.newResult)
      }
    },
      eventText (e) {
        console.log(e)
        return `${e.type}: ${e.target.value}`
        }
    }
});