Pousser des objets vers un tableau, API composable

Question

Il y a un projet. Il existe deux options de sélection « taille » (grande, petite) et quantité (2/4/6).

Lorsque chaque option est sélectionnée, la sélection doit être affichée dans le titre (disons petit et 4). Après avoir cliqué sur le bouton « Ajouter au stockage », il sera ajouté au stockage et une liste s'affichera sur une autre page.

Ce que j'ai essayé :

vue ts :

const chosenMachines = reactive([]);

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

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

Modèle :

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

Lors de l'ajout ultérieur du premier objet et du deuxième objet, le premier objet est écrasé. Quelle en est la raison ?

Answer 1

Toute mise à jour de machineInfo.value推入数组中保留对原始对象的引用。您刚刚进行了浅拷贝。对machineInfo.value entraînera également la mise à jour des valeurs du tableau. Vous devez faire une copie complète avant de pousser.

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

Il existe de nombreuses autres façons de faire une copie complète, en fonction de vos données, il peut y avoir une méthode plus adaptée.