Store user input in an array database

Question

I'm trying to create an advertising website where the user creates a profile with all the details and pictures from their profile, but to do this I need to store it in an array in the backend database in so that I can retrieve them later. This is what the backend javascript looks like.

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

    }
  },
})

This is what I need the array to look like, just with more input stored in it.

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

I'm trying to make it so that I can use it in Vue.js like this icon

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

The input here comes from different 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">

I also have file input that needs to be stored in an array, I hope this makes sense, I just don't know how to store the input into an array like the one I've shown so that I can use it on multiple different pages It needs to be put into an array when the profile is created after they click on the onsubmit button, sorry this is too long, any help would be greatly appreciated, thank you.

Answer 1

I think your element data should be generated as an array, not an object, so that you can easily put this array on the html page, and when you click submit, you can insert the latest data into this array , shouldn't it be? Is that so?