将用户输入存储在一个数组数据库中

Question

我正在尝试创建一个广告网站，用户在其中创建一个个人资料，其中包含其个人资料中的所有详细信息和图片，但要做到这一点，我需要将其存储在后端数据库的数组中，以便我以后可以检索它们。 这就是后端 javascript 的样子。

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

    }
  },
})

这就是我需要的数组的样子，只是其中存储了更多的输入。

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

我正在尝试制作它，以便我可以在 Vue.js 中使用它，就像这样的图标

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

这里的输入来自不同的 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">

我也有文件输入需要存储在数组中，我希望这是有道理的，我只是不知道如何将输入存储到像我展示的那样的数组中，以便我能够在多个不同的页面上使用它当他们点击 onsubmit 按钮后创建配置文件时，需要将其放入一个数组中，抱歉，这太长了，任何帮助都将不胜感激，谢谢。

Answer 1

我觉得你的元素数据应该生成为一个数组，而不是一个对象，这样你就可以在html页面方便的把这个数组，当你点击提交的时候，就可以将最新的数据插入到这个数组中，不应该吗是这样吗？