vue.js
<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> </templatearchivo javascript
<script> export const useProfileStore = defineStore('profile', { state: () => { return { Name: {{ name }}, Phone: {{ phone }}, email: {{ email }}, age: {{ age }} } },Necesitaba una matriz como esta para poder usarla para crear perfiles para los usuarios en el sitio web.
const users = [ { name: "Fred", phone: "00997878", email: "abc@t.com", age: "20" }, { name: "Tom", phone: "0998899", email: "abc@t.com", age: "23" }, </script>Pensé que sería una especie de bucle for para la matriz, pero realmente no estoy seguro de cómo hacerlo, cualquier ayuda sería genial, gracias.
¿Ya tiene datos de usuario y desea vincularlos en las entradas para crear un perfil de usuario? En caso afirmativo, puede usar la directiva v-for en la plantilla para iterar sobre una matriz.
demostración :
new Vue({ el: '#app', data: { users: [{ name: "Fred", phone: "00997878", email: "abc@t.com", age: "20" },{ name: "Tom", phone: "0998899", email: "abc@t.com", age: "23" }] }, methods: { createprofile() { console.log(this.users); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(user, index) in users" :key="index"> <input id="email" v-model="user.email" type="text" placeholder="Email"> <input id="name" v-model="user.name" type="text" placeholder="Name"> <input id="phone" v-model="user.phone" type="text" placeholder="Phone no."> <input id="age" v-model="user.age" type="text" placeholder="Age"> </div><br> <button @click="createprofile()">Submit</button> </div>