Estoy tratando de crear un sitio web donde el usuario pueda cargar fotos y texto para anunciar artículos, estoy tratando de almacenar la entrada en una matriz cuando hacen clic en el botón Enviar, pero no estoy seguro de cómo esto es lo que tengo hasta ahora.
<template> <input id="email" v-model="email" type="text" placeholder="Email"> <input id="name" v-model="name" type="text" placeholder="Name"> <input id="phone" v-model="phone" type="text" placeholder="Phone no."> <input id="age" v-model="age" type="text" placeholder="Age"> <button onclick="createprofile()">Submit</button> </templatelo que estoy tratando de hacer es obtener la entrada del usuario y luego almacenarla como una matriz como esta a continuación
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", }]estaba pensando en hacer eso, tendría que tener algo como esto a continuación para lograrlo, pero realmente no estoy seguro
<script> export const useProfileStore = defineStore('profile', { state: () => { return { Name: {{ name }}, Phone: {{ phone }}, email: {{ email }}, age: {{ age }} } }, </script>Como dije, no estoy seguro de que cualquier ayuda sea muy apreciada, gracias.
Depende de lo que quiera hacer con la matriz de users . Puede definirlo en una tienda externa o puede registrarse directamente dentro de su componente de esta manera:
Vue.createApp({ data() { return { users: [], email:'', name: '', phone: '', age: '' } }, methods: { createProfile() { const {email, name, phone, age} = this this.users.push({email, name, phone, age}) this.email = this.name = this.phone = this.age = '' } } }).mount('#app') <div id="app"> <form @submit.prevent="createProfile"> <input id="email" v-model="email" type="text" placeholder="Email"/> <input id="name" v-model="name" type="text" placeholder="Name"/> <input id="phone" v-model="phone" type="text" placeholder="Phone no."/> <input id="age" v-model="age" type="text" placeholder="Age"/> <button>Submit</button> </form> <ul> <li v-for="user in users"> {{user}} </li> </ul> </div> <script src="https://unpkg.com/vue@3"></script>