Предотвращение зацикливания массива при вводе текста и извлечение значения из этого массива | Вью

Question

Я пытаюсь разобраться с Vue и провел последние несколько дней, пытаясь собрать проект, который выполняет 2 вычисления из пользовательского ввода, отображает результат и изменяет массив.

вычисление 1: единицы = вариация_имя.qty * вычисление пакетаQty 2: единица измерения пакета = сумма единиц

Мне удалось создать что-то, что работает, хотя и имеет довольно много проблем.

Один изпроблема заключается в том, что он создает бесконечный массив каждый раз, когда я вводю новые значения в поле «Количество пакетов», дублируя результаты.

Вторая проблема заключается в том, что я не могу получить значения totalQuantity измассив.

Как остановить бесконечный массив, извлечь и отобразить ключ totalQuantity из массива.

Я также создал A 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}`
        }
    }
});