Stocker les entrées de l'utilisateur dans une base de données de tableau

Question

J'essaie de créer un site Web publicitaire sur lequel l'utilisateur crée un profil avec tous les détails et images de son profil, mais pour ce faire, je dois le stocker dans un tableau de la base de données backend, afin de pouvoir les récupérer plus tard. . Voici à quoi ressemble le javascript backend.

export const useProfileStore = defineStore('profile', {
  state: () => {
    return { 
      firstName: "Ellen",
      lastName: "Hopegar",
      email: "me@luddb.com"

    }
  },
})

C'est à cela que j'ai besoin que le tableau ressemble, juste avec plus d'entrées stockées.

const users = [
  {
    firstname: "Fred",
    lastName: "Boy",
    email: "abc@t.com",
  },
  {
    firstname: "Tom",
    lastName: "Boy",
    email: "abc@t.com",
  },
  {
    firstname: "Jerry",
    lastName: "Boy",
    email: "abc@t.com",
  },
  {
    firstname: "Sam",
    lastName: "Boy",
    email: "abc@t.com",
  },
  {
    firstname: "Ben",
    lastName: "Boy",
    email: "abc@t.com",
  }]

J'essaie de faire en sorte que je puisse l'utiliser dans Vue.js comme cette icône

<div v-for="user in users" :key="user.firstName" class="bg-slate-400 hover:bg-slate-800 w-64 p-4 rounded-xl shadow flex m-2 cursor-pointer">
    <div class="w-10">
      <img alt="Vue logo" src="../assets/logo.png" />
    </div>
    <div class="ml-4">
      <p class="font-bold">{{ user.firstname }} {{ user.lastName }}</p>
      <p class="-mt-1 text-xs">{{ user.email }}</p>
    </div>
  </div>

L'entrée ici provient de différents vue.js

<form class="review-form" @submit.prevent="onSubmit">
<div id= "app">
 <div>
 
             <input id="name" v-model="name" type="text" placeholder="Name">
            <input id="email" v-model="email" type="text" placeholder="Email">
           <input id="phone" v-model="phone" type="text" placeholder="Phone no.">
           <input id="age" v-model="age" type="text" placeholder="Age">

J'ai aussi une entrée de fichier qui doit être stockée dans un tableau, j'espère que cela a du sens, je ne sais tout simplement pas comment stocker l'entrée dans un tableau comme celui que j'ai montré afin de pouvoir l'utiliser sur plusieurs différentes pages lorsqu'ils créent le profil après avoir cliqué sur le bouton onsubmit, il doit être placé dans un tableau, désolé, c'est trop long, toute aide serait grandement appréciée, merci.

Answer 1

Je pense que les données de vos éléments doivent être générées sous forme de tableau au lieu d'un objet, afin que vous puissiez facilement placer ce tableau sur la page HTML, et lorsque vous cliquez sur Soumettre, vous pouvez insérer les dernières données dans ce tableau, n'est-ce pas. être ? Est-ce vrai ?