如何使用vue提交从对象数组中提取数据的预填充表单

Question

对于我的学校项目，我正在制作一个遛狗网络应用程序，我正在尝试创建一个表单来更新用户拥有的狗的信息。

这些信息存储在一个对象数组中，其中每个对象都包含一只狗的信息，我使用了一个v-for，其中我为数组中的每只狗调用了一个表单，这是第一个组件：

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

如您所见，我使用v-for为数组中的每个宠物调用UpdatePets表单，下面是UpdatePets组件的代码：

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

问题是它不工作，它不预填充表单，我所做的就是尝试修改一些代码，我知道它可以在更新用户信息的地方工作，以下是该组件的代码，它工作得很好：

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

如有任何帮助，我们将不胜感激here's an image showing the vue devtools, as you can see the form is not prefilling, also you can see the array

Answer 1

1. 在UpdatePets.vue中您已经在属性上声明了pets和currentUser，不需要在主.vue文件中再次声明它，您正在传递pet属性，同时UpdatePets.vue接受pets属性，将<代码>D12上的属性从<代码>D13更改为pet

除此之外，它应该工作得很好。查看我在这里制作的极简主义演示：https://codesandbox.io/s/priceless-elbakyan-ef2qu?file=/src/App.vue