Having user input from vue.js stored in an array on javascript

Question

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: "[email protected]",
    age: "20"
  },
  {
    name: "Tom",
    phone: "0998899",
    email: "[email protected]",
    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.

Answer 1

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: "[email protected]",
      age: "20"
    },{
      name: "Tom",
      phone: "0998899",
      email: "[email protected]",
      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>