对于我的学校项目，我正在制作一个狗步行器Web应用程序，我试图创建一个表单来更新有关用户拥有的狗的信息，该信息存储在对象数组中，其中每个对象都包含该信息的狗，我使用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>
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
