Simpan input pengguna dalam pangkalan data tatasusunan

Question

Saya cuba mencipta tapak web pengiklanan di mana pengguna membuat profil dengan semua butiran dan gambar daripada profil mereka, tetapi untuk melakukan ini, saya perlu menyimpannya dalam tatasusunan dalam pangkalan data bahagian belakang, supaya saya boleh mendapatkannya kemudian . Inilah rupa javascript bahagian belakang.

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

    }
  },
})

Inilah rupa yang saya perlukan tatasusunan, hanya dengan lebih banyak input yang disimpan di dalamnya.

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",
  }]

Saya cuba membuatnya supaya saya boleh menggunakannya dalam Vue.js seperti ikon ini

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

Input di sini datang daripada vue.js yang berbeza

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

Saya juga mempunyai input fail yang perlu disimpan dalam tatasusunan, saya harap ini masuk akal, saya hanya tidak tahu cara menyimpan input ke dalam tatasusunan seperti yang saya tunjukkan supaya saya boleh menggunakannya pada berbilang halaman yang berbeza apabila Apabila mereka membuat profil selepas mengklik butang serahkan, ia perlu dimasukkan ke dalam tatasusunan, maaf ini terlalu panjang, sebarang bantuan amat kami hargai, terima kasih.

Answer 1

Saya rasa data elemen anda harus dijana sebagai tatasusunan dan bukannya objek, supaya anda boleh meletakkan tatasusunan ini dengan mudah pada halaman html, dan apabila anda mengklik hantar, anda boleh memasukkan data terkini ke dalam tatasusunan ini adakah begitu?