CODEWITHSUNDEEP
javascripthtmlvue.js
Epimetheus14
Epimetheus14

Reputation: 103

How do I store user input from vue.js into an array on javascript?

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: "[email protected]",
  },
  {
    firstname: "Tom",
    lastName: "Boy",
    email: "[email protected]",
  },
  {
    firstname: "Jerry",
    lastName: "Boy",
    email: "[email protected]",
  }]

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.

Upvotes: 2

Views: 504

Answers (1)

Namysh
Namysh

Reputation: 4667

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>

Upvotes: 2

Related Questions