[Vuejs]-How to submit a prefilled form using vue pulling data from an array of objects

by

0👍

So there are a few problems here, but they’re all surmountable. 🙂

First, you have…

<b-form-input
  id="input-3"
  v-model="item.proposedPetHeight"
  required
  min="0"
>

However your items (the pets) doesn’t have a proposedHeight. They each have a regular old height. And, there’s only one single proposedHeight defined in your object data, but you could have many (even INFINITE) proposedHeights for however many pets your user has.

So, we not only need a v-for each pet, but we need to v-for a brand new form for each pet:

PetsForm.vue or whatever…

<template>
  <div>
    <PetForm v-for="pet in pets" :pet="pet" :currentUser="currentUser">
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentUser: {}
      pets: [] // Note, your default for an Array should be [] not {}
    }
  }
}
</script>

PetForm.vue for just a single pet

<template>
  <div>
    <h3>
      Form for Pet {{pet.name}} or whatever
    </h3>
    <label>
    <input v-model="proposedHeight">
    <button>Save</button>
  </div>
</template>

<script>
export default {
  props: ['pet', 'currentUser'],
  data() {
    return {
      proposedHeight: ''
    }
  },

  mounted() {
    this.proposedHeight = this.pet.height
  }
}
</script>

Note: I’ve skipped a lot of formatting. Just trying to demonstrate the basics: How to nest multiple forms on a page with `v-if.

Leave a comment