I'm trying to create a website where the user can upload photos and text to advertise items, im trying to get the input stored in an array when they click the submit button but am unsure how to this is what i have so far.
<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
what im trying to do is get the user input and then have it stored as an array like this below
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",
}]
i was thinking to do that i would have to have something like this below to accomplish it but im really not sure
<script>
export const useProfileStore = defineStore('profile', {
state: () => {
return {
Name: {{ name }},
Phone: {{ phone }},
email: {{ email }},
age: {{ age }}
}
},
</script>
As I said i'm really not sure any help would be greatly appreciated, Thanks.
It depends on what you want to do with the users array. You can either define it in an external store or you can register in directly within your component like this :
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>