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

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 a user owns.

This information is stored in an array of objects, where each object contains the info of a dog, I'm using a v-for where I call a form for each dog in the array, here's the first component:

<template>
  <div class="body">
    <h1 class="mt-3">Tus perros</h1>
    <b-row class="mt-1">
      <div class="cards mx-5 mb-5">
        <UpdatePets 
          v-for="pet in pets"
          :key="pet.id"
          :pet="pet"
          :currenUser="currentUser"
          :title="pet.dog_name"
          tag="article"
          style="max-width: 17rem;"
          class="card">
        </UpdatePets>
        </div>
    </b-row>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import UpdatePets from '@/components/Update/UpdatePets.vue';
export default {
  name: "DogsComponente",
  components: { UpdatePets },
  data() {
    return {
    currentUser: {},
    pets: [],
    }
  },
created() {
    if (localStorage.getItem("pet")) {
      try {
        this.pets = JSON.parse(localStorage.getItem("pet"));
      } catch (e) {
        localStorage.removeItem("pet");
      }
    }
    if (localStorage.getItem("user")) {
      try {
        this.currentUser = JSON.parse(localStorage.getItem("user"));
      } catch (e) {
        localStorage.removeItem("user");
      }
    }
    this.getMascotas();
  },
  methods: {
    getMascotas(){
      this.$store.dispatch("getMascotaById", {
          cadena: this.currentUser.user
          });
    }
  },
};
</script>

<style lang="scss" scoped>
h1 {
  color: #40db9a;
}
.body {
  margin: 0;
  height: auto;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cards {
  display: flex;
}
.card {
  color: #063869;
  background-color: #eef6e1;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 3px 3px 12px 2px rgba(black, 0.6);
  transition: 0.2s;
}
.card:not(:first-child) {
  margin-left: -2rem;
}
.card:not(:last-child):hover,
.card:not(:last-child):focus-within {
  transform: translateY(-1rem);
  ~ .card {
    transform: translateX(2rem);
  }
}
</style>

As you can see, I use a v-for to call the UpdatePets form for each pet in the array, here's the code for the UpdatePets component:

<template>
  <div class="body">
    <b-row class="mt-1">
      <div class="cards mx-5 mb-5">
         <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="proposedDogName"             
              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="proposedDogRace"
              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="proposedDogHeight"
              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="proposedDogWeight"
              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="proposedDogAge"
              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="proposedDogNotes"
            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>
      </div>
    </b-row>
  </div>
</template>

<script>
export default {
  props: ['pets', 'currentUser'],
  name: "DogsComponente",
  data() {
    return {
    currentUser: {},
    pets: [],
    proposedDogName: "",
    proposedDogRace: "",
    proposedDogHeight: "",
    proposedDogWeight: "",
    proposedDogAge: "",
    proposedDogNotes: ""
    }
  },
  mounted() {
    if (localStorage.getItem("pet")) {
      try {
        this.pets = JSON.parse(localStorage.getItem("pet"));
        this.proposedDogName = this.pets.dog_name
        this.proposedDogRace = this.pets.dog_race
        this.proposedDogHeight = this.pets.dog_height
        this.proposedDogWeight = this.pets.dog_weight
        this.proposedDogAge = this.pets.dog_age
        this.proposedDogNotes = 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();
  },
  methods: {
    getMascotas(){
      this.$store.dispatch("getMascotaById", {
          cadena: this.currentUser.user
          });
    },
    updateMascota() {      
      this.$store.dispatch("updateMascota", [{
        dog_name: this.proposedDogName,
        dog_race: this.proposedDogRace,
        dog_height: this.proposedDogHeight,
        dog_weight: this.proposedDogWeight,        
        dog_age: this.proposedDogAge,
        dog_notes: this.proposedDogNotes,
      }, "pets"])
      .then(({ data }) => {
          if (data === "") {
            alert("Error al actualizar datos");
          } else {
            alert ("Has actualizado tus datos")
            location.reload();
          }
        });
    },

  },
};
</script>

<style lang="scss" scoped>
h1 {
  color: #40db9a;
}
.body {
  margin: 0;
  height: auto;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cards {
  display: flex;
}
.card {
  color: #063869;
  background-color: #eef6e1;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 3px 3px 12px 2px rgba(black, 0.6);
  transition: 0.2s;
}
.card:not(:first-child) {
  margin-left: -2rem;
}
.card:not(:last-child):hover,
.card:not(:last-child):focus-within {
  transform: translateY(-1rem);
  ~ .card {
    transform: translateX(2rem);
  }
}
</style>

The problem is that it doesn't work, it doesn't prefill the form, all i'm doing is trying to adapt some code that i know it works where i update a user's info, here's the code for that component, which works perfectly:

<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>

Any help would be appreciated here's an image showing the vue devtools, as you can see the form is not prefilling, also you can see the array

Owl · Accepted Answer · 2020-05-17 21:53:40Z

1

In UpdatePets.vue you already declared pets and currentUser on the props, don't need to declare it again in data()
On the main .vue file, you are passing pet prop, meanwhile the UpdatePets.vue accepting pets prop, change the prop on UpdatePets.vue from pets to pet

Other than that, it should work fine. Check the minimalist demo i made here : https://codesandbox.io/s/priceless-elbakyan-ef2qu?file=/src/App.vue

answered May 17, 2020 at 21:53

Owl

6,9033 gold badges21 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related