如何使用vue从对象数组中提取数据来提交预先填充的表单
如何使用vue从对象数组中提取数据来提交预先填充的表单
提问于 2020-05-15 09:22:41
对于我的学校项目，我正在制作一个散步狗的web应用程序，我正在尝试创建一个表单来更新用户拥有的狗的信息，我已经能够创建一个预先填写的表单来更新用户的信息这里是我如何做的
<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>现在我想做同样的事情，但是对于用户可能拥有的所有狗，这些狗的信息存储在一个对象数组中，数组中的每个对象存储一只狗的信息，这是我的代码
<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>如你所见，我试着修改代码，但它不工作，它不会预先填写表单，当我尝试更新宠物信息时，它不会发送任何信息，如果你需要更多关于我的代码的信息，我很乐意回答，任何帮助都将不胜感激
回答 1
Stack Overflow用户
发布于 2020-05-15 10:49:10
所以这里有一些问题，但它们都是可以克服的。:)
首先你有..。
<b-form-input
id="input-3"
v-model="item.proposedPetHeight"
required
min="0"
>然而，您的物品(宠物)没有proposedHeight。他们每个人都有一个普通的旧height。而且，在您的对象data中只定义了一个proposedHeight，但是对于您的用户有多少宠物，您可以有许多(甚至是无限的) proposedHeights。
因此，我们不仅需要为每只宠物使用v-，还需要为每只宠物创建一个全新的形式：
PetsForm.vue或者其他什么……
<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
<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>注意:我跳过了很多格式设置。我只是想演示一下基础知识:如何使用‘V-if’在一个页面上嵌套多个表单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61810137
复制相关文章
相似问题
腾讯云开发者
