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>
</template
javascript file
<script>
export const useProfileStore = defineStore('profile', {
state: () => {
return {
Name: {{ name }},
Phone: {{ phone }},
email: {{ email }},
age: {{ age }}
}
},
I needed the array like this so i could use it to create profiles for the users on the website.
const users = [
{
name: "Fred",
phone: "00997878",
email: "abc@t.com",
age: "20"
},
{
name: "Tom",
phone: "0998899",
email: "abc@t.com",
age: "23"
},
</script>
I thought it would be some kind of for loop for the array but i'm really not sure how to do it, any help would be great thanks.
You already have a user data and want to bind that in inputs to create a user profile ? If Yes, You can use v-for directive in the template to iterate over an array.
Demo :
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>