How to submit a prefilled form using vue pulling data from an array of objects

Question

For my school project i'm making a dog walker web app, I'm trying to create a form to update the information about the dogs that an user owns, i am already able to create a prefilled form to update the information of an user here's how i do it

<template>
  <div class="home">
    <div class="body">
      <h1>Actualiza Datos de Usuario</h1>
    <div class="SignUp">

      <img height="300" src="@/assets/Images/Usuario(1).png" alt="image slot" />
      <b-form @submit.prevent="updateUsuario" class="pl-4">
        <b-form-group id="input-group-1" label="User ID:" label-for="input-1">
          <b-form-input
            id="input-1"  
            v-model="proposedClientUser"
            required 
            readonly          
          >

          </b-form-input>
        </b-form-group>

        <b-form-group
          id="input-group-2"
          label="Tu contraseña:"
          label-for="input-2"
        >
          <b-form-input
            id="input-2"
            v-model="proposedClientPassword"
            type="password"
            required
          ></b-form-input>
        </b-form-group>

        <b-form-group
          id="input-group-3"
          label="Tu Nombre Completo:"
          label-for="input-3"
        >
          <b-form-input
            id="input-3"
            v-model="proposedClientName"
            required
          ></b-form-input>
        </b-form-group>

        <b-form-group
          id="input-group-4"
          label="Tu numero de celular:"
          label-for="input-4"
        >
          <b-form-input
            id="input-4"
            v-model="proposedClientPhone"
            type="number"
            required
          ></b-form-input>
        </b-form-group>

        <b-form-group
          id="input-group-5"
          label="Tu correo electronico:"
          label-for="input-5"
        >
          <b-form-input
            id="input-5"
            v-model="proposedClientEmail"
            type="email"
            required
          ></b-form-input>
        </b-form-group>

        <b-form-group
          id="input-group-6"
          label="Tu Direccion:"
          label-for="input-6"
        >
          <b-form-input
            id="input-6"
            v-model="proposedClientAddress"
            required
          ></b-form-input>
        </b-form-group>

        <b-button block pill type="submit" variant="success"
          >Actualiza tus datos</b-button
        >
      </b-form>
    </div>
      </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "UpdateClient", 
  data() {
    return {  
      currentUser:{},
      proposedClientUser:"",
      proposedClientPassword:"", 
      proposedClientName:"",
      proposedClientPhone:"",
      proposedClientEmail:"",
      proposedClientAddress:""     
    };
  },
  methods: {
    updateUsuario() {      
      this.$store.dispatch("updateUsuario", [{
        user: this.proposedClientUser,
        password: this.proposedClientPassword,
        client_name: this.proposedClientName,
        client_phone: this.proposedClientPhone,
        client_e_mail: this.proposedClientEmail,
        client_address: this.proposedClientAddress
      }, "clients"])
      .then(({ data }) => {
          if (data === "") {
            alert("Error al actualizar datos");
          } else {
            alert ("Has actualizado tus datos")
            this.$store.dispatch("logout");
            location.replace('/login');
          }
        });
    },
  },
  created() {
    if (localStorage.getItem("user")) {
      try {
        this.currentUser = JSON.parse(localStorage.getItem("user"));
        this.proposedClientUser = this.currentUser.user
        this.proposedClientPassword = this.currentUser.password
        this.proposedClientName = this.currentUser.client_name
        this.proposedClientPhone = this.currentUser.client_phone
        this.proposedClientEmail = this.currentUser.client_e_mail
        this.proposedClientAddress = this.currentUser.client_address
      } catch (e) {
        localStorage.removeItem("user");
      }
    }
  }
};
</script>
<style>
.body {
  margin-bottom: 20px;
}
</style>

now i want to do the same but with all the dogs that an user might own, the information of these dogs is stored in an array of objects, where each object in the array stores the information of a dog, here's my code

<template>
  <div class="body">
    <h1 class="mt-3">{{ msg }}</h1>
    <b-row class="mt-1">
      <div class="cards mx-5 mb-5">
        <b-card
          v-for="item in pets"
          :key="item.id"
          :title="item.dog_name"
          tag="article"
          style="max-width: 17rem;"
          class="text-center"
        >
          <b-form @submit.prevent="updateMascota" class="pl-4">
            <b-form-group id="input-group-1" label="Nombre:" label-for="input-1">
            <b-form-input
              id="input-1"
              v-model="item.proposedPetName"             
              required  
              readonly         
            >          
            </b-form-input>
            </b-form-group>
            <b-form-group
            id="input-group-2"
            label="Raza:"
            label-for="input-2"
            >
            <b-form-input
              id="input-2"
              v-model="item.proposedPetRace"
              required
            >
            </b-form-input>
            </b-form-group>

            <b-form-group
            id="input-group-3"
            label="Altura en cm:"
            label-for="input-3"
            >
            <b-form-input
              id="input-3"
              v-model="item.proposedPetHeight"
              required
              min="0"
            >
            </b-form-input>
            </b-form-group>

            <b-form-group
            id="input-group-4"
            label="Peso en Kg:"
            label-for="input-4"
            >
            <b-form-input
              id="input-4"
              v-model="item.proposedPetWeight"
              required
              min="0"
            ></b-form-input>
            </b-form-group>

            <b-form-group
            id="input-group-4"
            label="Edad en años:"
            label-for="input-4"
            >
            <b-form-input
              id="input-4"
              v-model="item.proposedPetAge"
              type="number"
              min="0"
              required
            ></b-form-input>
            </b-form-group>

            <b-form-group
            id="input-group-6"
            label="Algo mas?:"
            label-for="input-6"
            >
            <b-form-textarea
              id="input-6"
              v-model="item.proposedPetNotes"
             rows="3"
              max-rows="6"
            >
            </b-form-textarea>
            </b-form-group>
           <b-button block pill type="submit" variant="success">
            Actualizar datos</b-button>
           </b-form>    
        </b-card>        
      </div>
    </b-row>
    <div>
  </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "DogsComponente",
  data() {
    return {
    currentUser:{},
    pets:{},
    proposedPetName:"",
    proposedPetRace:"",
    proposedPetHeight:"",
    proposedPetWeight:"",
    proposedPetAge:"", 
    proposedPetNotes:"", 
    }
  },
  props: {
    msg: String,   
  },
  methods: {
    getMascotas(){
      this.$store.dispatch("getMascotaById", {
          cadena: this.currentUser.user
          });
    },
    updateMascota() {      
      this.$store.dispatch("updateMascota", [{
      dog_name: this.proposedPetName,
      dog_race: this.proposedPetRace,
      dog_height: this.proposedPetHeight,
      dog_weight: this.proposedPetWeight,
      dog_age: this.proposedPetAge,
      dog_notes: this.proposedPetNotes,
      }, "pets"])
      .then(({ data }) => {
          if (data === "") {
            alert("Error al actualizar datos");
          } else {
            alert ("Has actualizado tus datos")
            location.reload();
          }
        });
    }
  },
  created() {
    if (localStorage.getItem("pet")) {
      try {
        this.pets = JSON.parse(localStorage.getItem("pet"));
        this.proposedPetName = this.pets.dog_name
        this.proposedPetRace = this.pets.dog_race
        this.proposedPetHeight = this.pets.dog_height
        this.proposedPetWeight = this.pets.dog_weight
        this.proposedPetAge = this.pets.dog_age
        this.proposedPetNotes = this.pets.dog_notes
      } catch (e) {
        localStorage.removeItem("pet");
      }
    }
    if (localStorage.getItem("user")) {
      try {
        this.currentUser = JSON.parse(localStorage.getItem("user"));
      } catch (e) {
        localStorage.removeItem("user");
      }
    }
    this.getMascotas();
  },
};
</script>

as you can see i tried to adapt the code, but it doesn't work, it doesn't prefill the form and it doesn't send any information when i try to update the pets info, if you need any more information about my code i'd be happy to answer, any help would be greatly appreciated

@LannyBose i tagged you as you told me, i think?

jmcj007
– jmcj007

2020-05-15 01:24:15 +00:00
Commented May 15, 2020 at 1:24 — jmcj007
– jmcj007, Commented May 15, 2020 at 1:24
@lanny-bose i'm not sure how this works

jmcj007
– jmcj007

2020-05-15 01:29:01 +00:00
Commented May 15, 2020 at 1:29 — jmcj007
– jmcj007, Commented May 15, 2020 at 1:29

Lanny Bose · Accepted Answer · 2020-05-15 02:49:10Z

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.

answered May 15, 2020 at 2:49

Lanny Bose

1,8571 gold badge13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jmcj007 Over a year ago

hello, sorry to bother you, but i'm having a hard time implementing what you told me, is there any way that you can check out my code, maybe you can see what i'm missing, help would be much appreciated

jmcj007 Over a year ago

stackoverflow.com/questions/61858003/…, here is my code i had to ask another question because as i tell you i'm having a hard time implementing this, as you can see i followed your advice, but the forms aren't prefilling, as they did when i was just working with only one user data

Collectives™ on Stack Overflow

How to submit a prefilled form using vue pulling data from an array of objects

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related