How to populate empty objects in an array with Vue?

Question

<template>
  <div>
    <select v-model="selected" class="mb-3">
      <option v-for="n in 10" :key="n" :value="n">{{ n }}</option>
    </select>

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Surname</th>
          <th>Birthday</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(n, index) in selected" :key="index">
          <td>
            <p>
              <label>{{ n }}.Customer</label>
            </p>
          </td>
          <td>
            <input v-model="customer.name" type="text" placeholder="name" />
          </td>
          <td>
            <input v-model="customer.surname" type="text" placeholder="name" />
          </td>
          <td>
            <input v-model="customer.birthday" type="date" placeholder="name" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customer: {
        name: null,
        surname: null,
        birthday: null,
      },
      customers: [],
      selected: 1,
    }
  },
}
</script>

In this scenario, there is one form. If the user wants to enter 2 customers at the same time.
How do I add the information of the two customers into the array? How do I add to customers array without creating v-models separately? I want to do this

They should be kept as objects in a single array when I press the "send" button — oguzcan
– oguzcan, Commented Nov 8, 2022 at 21:00
Firstly thanks, but this is not the answer I want. I don't want to make an edit, I want to put the form that comes in n numbers into a single array after I fill in the information as much as n people. — oguzcan
– oguzcan, Commented Nov 9, 2022 at 6:33
Have to admit that I really don't understand what you mean sorry. More images or a step by step explanation could maybe help. Saw something similar on a website? — kissu
– kissu, Commented Nov 9, 2022 at 10:11
Thank you. For now, I solved it by creating 3 empty objects in the customer array and filling this array with v-for. — oguzcan
– oguzcan, Commented Nov 9, 2022 at 10:26

kissu · Accepted Answer · 2022-11-09 12:23:44Z

Update2: not a lot of difference, but the customers are starting as null objects (still have some pre-defined keys for obvious reasons) into an empty array.

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Birthday</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="customer in customers" :key="customer.id">
        <td>
          <input v-model="customer.name" type="text" placeholder="name" />
        </td>
        <td>
          <input v-model="customer.surname" type="text" placeholder="name" />
        </td>
        <td>
          <input v-model="customer.birthday" type="date" placeholder="name" />
        </td>
      </tr>
    </tbody>

    <button @click="pushNewCustomer">Add new customer</button>

    <pre>
      {{ customers }}
    </pre>
  </table>
</template>

<script>
export default {
  data() {
    return {
      id: 1,
      customers: [],
    }
  },
  mounted() {
    // you can call this function or have it as an HTTP response
    this.pushNewCustomer()
    this.pushNewCustomer()
    this.pushNewCustomer()
  },
  methods: {
    pushNewCustomer() {
      this.customers.push({
        id: this.id++,
        name: null,
        surname: null,
        birthday: null,
      })
    },
  },
}
</script>

Update: this is how you iterate and v-model on a collection of objects.

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Birthday</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="customer in customers" :key="customer.id">
        <td>
          <input v-model="customer.name" type="text" placeholder="name" />
        </td>
        <td>
          <input v-model="customer.surname" type="text" placeholder="name" />
        </td>
        <td>
          <input v-model="customer.birthday" type="date" placeholder="name" />
        </td>
      </tr>
    </tbody>

    <pre>
      {{ customers }}
    </pre>
  </table>
</template>

<script>
export default {
  data() {
    return {
      customers: [
        { id: 1, name: 'bob', surname: 'marley', birthday: '1911-01-01' },
        { id: 2, name: 'john', surname: 'lennon', birthday: '1922-02-02' },
        { id: 3, name: 'michael', surname: 'bublé', birthday: '1933-03-03' },
      ],
    }
  },
}
</script>

If you want to save the whole edited array, you can save customers directly.

This one of a million possible ways

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Birthday</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input v-model="customer.name" type="text" placeholder="name" />
        </td>
        <td>
          <input v-model="customer.surname" type="text" placeholder="name" />
        </td>
        <td>
          <input v-model="customer.birthday" type="date" placeholder="name" />
        </td>
      </tr>
    </tbody>
    <button @click="saveUser">Save that specific user</button>

    <br />
    <br />
    <div>All saved users</div>

    <br />
    <br />
    <pre v-for="savedCustomer in customers" :key="savedCustomer.name">
      {{ savedCustomer }}
    </pre>
  </table>
</template>

<script>
export default {
  data() {
    return {
      customer: {
        name: null,
        surname: null,
        birthday: null,
      },
      customers: [],
    }
  },
  methods: {
    saveUser() {
      this.customers.push(this.customer)
      this.customer = {
        name: null,
        surname: null,
        birthday: null,
      }
    },
  },
}
</script>

Example available here too.

This is how it looks

PS: you can also save that to a store, to some localStorage, to a database. It all depends on how you want to handle that one.

Or you can create 2 different hardcoded states but I'm not sure this is the way to go haha.

Firstly, thank you. What I mean is that if the number of users is received dynamically, if I have as many forms as the number of users entered, how do I add it? It would be difficult for me to make a separate v-model for each.
@oguzcan not sure how you plan to write in X forms to handle X users while keeping a nice UI/UX. You probably want to do that one by one, this is what I showed as an example. Otherwise, please give us more details about the actual flow that you want. Otherwise, if you want to make X users editable, you could create a table and an edit button next to each of them (on each row).

Collectives™ on Stack Overflow

How to populate empty objects in an array with Vue?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related