Store user input in an array database-CodePudding

I'm trying to create an advertisement website where users create a profile with all their details and pictures in their individual profiles but to do this I need to store it in an array in a backend database so that I can retrieve them later. This is how the backend javascript looks.

export const useProfileStore = defineStore('profile', {
  state: () => {
    return { 
      firstName: "Ellen",
      lastName: "Hopegar",
      email: "[email protected]"

    }
  },
})

This is sort of what I need the array to look like just with a lot more input being stored in them.

const users = [
  {
    firstname: "Fred",
    lastName: "Boy",
    email: "[email protected]",
  },
  {
    firstname: "Tom",
    lastName: "Boy",
    email: "[email protected]",
  },
  {
    firstname: "Jerry",
    lastName: "Boy",
    email: "[email protected]",
  },
  {
    firstname: "Sam",
    lastName: "Boy",
    email: "[email protected]",
  },
  {
    firstname: "Ben",
    lastName: "Boy",
    email: "[email protected]",
  }]

I'm trying to make it so that i can use it in Vue.js like this for the icons

 <div v-for="user in users" :key="user.firstName" >
    <div >
      <img alt="Vue logo" src="../assets/logo.png" />
    </div>
    <div >
      <p >{{ user.firstname }} {{ user.lastName }}</p>
      <p >{{ user.email }}</p>
    </div>
  </div>

Heres where the input is coming from a in a different vue.js

<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 i need to store in arrays as well, i hope this makes sense i just dont know how to store the input into an array like the one i showed so that im able to use it on multiple different pages and it needs to be put into an array when they create there profile once they hit the onsubmit button, sorry this is so long any help would really be appreciated, thanks.

CodePudding user response：

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

CodePudding user response：

So if you want to reuse the values you need a store that can hold the array of objects

export const usersStore = defineStore('users', {
  state: () => {
    return { 
      users: []
    }
  },
})

and when the user clicks a submit button you push your formatted obj to the users array


const store = usersStore()

store.users.push(user)