El principal problema está en el título. Supongo que ref() y reactive() de alguna manera están jugando entre sí, simplemente no sé cómo y qué podría hacer al respecto.
El componente que usa la tienda:
<script setup> import { ref } from "vue"; import { store } from "@/store.js"; const game = ref({ date: null, location: null, length: null, }); </script> <template> <form @submit.prevent="store.addGame(game)"> <input v-model="game.date" type="date" required /> <input v-model="game.location" type="text" placeholder="Location" required /> <input v-model="game.length" type="number" placeholder="Length (in minutes)" required /> <button class="button" type="submit">Submit ✔</button> </form> </template>El problema ocurre en la tienda, en la matriz de juegos, después de agregar un segundo o más elementos...
tienda.js:
import { reactive } from "vue"; export const store = reactive({ games: [], addGame(game) { this.games.push(game); console.log(this.games); } });La razón es porque todos los objetos que empujas dentro de los games comparten la misma referencia. Para arreglar esto, haz este cambio en store.js
import { reactive } from "vue"; export const store = reactive({ games: [], addGame(game) { this.games.push({...game}); // line changed console.log(this.games); } });No es "reemplazar", toda la referencia del game a la misma variable reactiva definida en const game = ref() .
Cada vez que llamas a store.addGame(game) , agregas el mismo game a la tienda. Debido a que el game es reactivo, implementará automáticamente el último valor de entrada por v-model .
Si pones otro botón para comprobar el valor en tienda. Cambie el valor de entrada y luego haga clic en el botón Probar, también puede ver los cambios de store.games .
<template> <form @submit.prevent="store.addGame(game)"> <input v-model="game.date" type="date" required /> <input v-model="game.location" type="text" placeholder="Location" required /> <input v-model="game.length" type="number" placeholder="Length (in minutes)" required /> <button class="button" type="submit">Submit ✔</button> </form> <button @click="console.log(store.games)">Test</button> </template>