Schieben Sie Objekte in ein Array, eine zusammensetzbare API

Question

Es gibt ein Projekt. Es gibt zwei Auswahlmöglichkeiten „Größe“ (groß, klein) und Menge (2/4/6).

Wenn jede Option ausgewählt ist, muss die Auswahl im Titel angezeigt werden (sagen wir klein und 4). Nachdem Sie auf die Schaltfläche „Zum Speicher hinzufügen“ geklickt haben, wird es dem Speicher hinzugefügt und auf einer anderen Seite wird eine Liste angezeigt.

Was ich versucht habe:

vue ts:

const chosenMachines = reactive([]);

const machineInfo = ref({
 size: "Standart",
 glasses: 6
})

const addToList = () => {
 // myStore.addToStoredItems(machineInfo)  ---> storage pinia
 chosenMachines.push(machineInfo.value)
}

Vorlage:

<div>Title {{ machineInfo.size  }} | {{ machineInfo.glasses }}</div>       
  <select name="size" v-model='machineInfo.size'  class='selects__select-item'>
    <option>Standart</option>
    <option>Big</option>
  </select>
  <select name="glasses" v-model.number='machineInfo.glasses' class='selects__select-item'>
    <option>6</option>
    <option>8</option>
    <option>12</option>
  </select>
 <button class='btn' @click='sendToStorage'>Add</button>

Wenn das erste Objekt und das zweite Objekt später hinzugefügt werden, wird das erste Objekt überschrieben.

Answer 1

将machineInfo.value推入数组中保留对原始对象的引用。您刚刚进行了浅拷贝。对machineInfo.value的任何更新都会导致数组中的值也更新。在推入之前，您需要先进行深拷贝。

chosenMachines.push({...machineInfo.value})

有许多其他方法可以进行深拷贝，具体取决于您的数据，可能有一种方法更适合。