对于我的学校项目，我正在制作一个遛狗网络应用程序，我正在尝试创建一个表单来更新有关用户拥有的狗的信息。
此信息存储在对象数组中，其中每个对象都包含一只狗的信息，我正在使用一个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>
任何帮助将不胜感激，这里有一张显示 vue devtools 的图像，因为您可以看到表单没有预填充，您也可以看到数组
UpdatePets.vue您已经在道具上声明了pets和currentUser，无需在data()中再次声明- 在主
.vue文件中，您正在传递pet道具，同时接受pets道具的UpdatePets.vue，将UpdatePets.vue上的道具从pets更改为pet
除此之外，它应该可以正常工作。 检查我在这里制作的极简主义演示：https://codesandbox.io/s/priceless-elbakyan-ef2qu?file=/src/App.vue