- 首页
- 前端开发
- 如何使用 vue 从对象数组中提取数据提交预填表单
如何使用 vue 从对象数组中提取数据提交预填表单
[英] How to submit a prefilled form using vue pulling data from an array of objects
本文介绍了如何使用 vue 从对象数组中提取数据提交预填表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
对于我的学校项目，我正在制作一个遛狗网络应用程序，我正在尝试创建一个表单来更新用户拥有的狗的信息，我已经能够创建一个预填充的表单来更新信息一个用户的这里是我怎么做
<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="图片槽"/><b-form @submit.prevent="updateUsuario" class="pl-4"><b-form-group id="input-group-1" label="用户 ID:" label-for="input-1"><b-表单输入id="输入-1"v-model="proposedClientUser"必需的只读></b-form-input></b-form-group><b-形式-组id="输入组-2"label="Tu contraseña:"label-for="input-2"><b-表单输入id="输入-2"v-model="proposedClientPassword"类型=密码"必需的></b-form-input></b-form-group><b-形式-组id="输入组-3"label="Tu Nombre Completo:"label-for="input-3"><b-表单输入id="输入-3"v-model="proposedClientName"必需的></b-form-input></b-form-group><b-形式-组id="输入组-4"label="Tu numero de celular:"label-for="input-4"><b-表单输入id="输入-4"v-model="proposedClientPhone"类型=数字"必需的></b-form-input></b-form-group><b-形式-组id="输入组-5"label="Tu correo electronico:"label-for="input-5"><b-表单输入id="输入-5"v-model="proposedClientEmail"类型=电子邮件"必需的></b-form-input></b-form-group><b-形式-组id="输入组-6"label="Tu Direccion:"label-for="input-6"><b-表单输入id="输入-6"v-model="proposedClientAddress"必需的></b-form-input></b-form-group><b-button块药片类型="提交"变体="成功">Actualiza tus datos</b-button></b-form>
</模板><脚本>从 'vuex' 导入 { mapState };导出默认{名称:更新客户端"，数据() {返回 {当前用户:{}，提议的客户用户:"",提议的客户密码:"",提议的客户名称:"",提议的客户电话:"",提议的客户电子邮件:"",提议的客户地址:""};},方法: {updateUsuario() {this.$store.dispatch("updateUsuario", [{用户:this.proposedClientUser，密码:this.proposedClientPassword，客户端名称:this.proposedClientName，client_phone: this.proposedClientPhone,client_e_mail: this.proposedClientEmail,client_address: this.proposedClientAddress}, "客户"]).then(({数据}) => {如果(数据==="){警报(错误 alactualizar datos")；} 别的 {警报(已实现")this.$store.dispatch("注销");location.replace('/登录');}});},},创建(){如果(localStorage.getItem(用户")){尝试 {this.currentUser = JSON.parse(localStorage.getItem("user"));this.proposedClientUser = this.currentUser.userthis.proposedClientPassword = this.currentUser.passwordthis.proposedClientName = this.currentUser.client_namethis.proposedClientPhone = this.currentUser.client_phonethis.proposedClientEmail = this.currentUser.client_e_mailthis.proposedClientAddress = this.currentUser.client_address}赶上(e){localStorage.removeItem("用户");}}}};<风格>.身体 {底边距:20px；}</风格>
现在我想做同样的事情，但是对于用户可能拥有的所有狗，这些狗的信息存储在一个对象数组中，数组中的每个对象都存储了一只狗的信息，这是我的代码
<div class="body"><h1 class="mt-3">{{ msg }}</h1><b-row class="mt-1"><div class="cards mx-5 mb-5"><b卡v-for="宠物中的物品":key="item.id":title="item.dog_name"标签=文章"样式="最大宽度:17rem;"类=文本中心"><b-form @submit.prevent="updateMascota" class="pl-4"><b-form-group id="input-group-1" label="Nombre:" label-for="input-1"><b-表单输入id="输入-1"v-model="item.proposedPetName"必需的只读></b-form-input></b-form-group><b-形式-组id="输入组-2"标签=拉扎:"label-for="input-2"><b-表单输入id="输入-2"v-model="item.proposedPetRace"必需的></b-form-input></b-form-group><b-形式-组id="输入组-3"label="Altura en cm:"label-for="input-3"><b-表单输入id="输入-3"v-model="item.proposedPetHeight"必需的分钟=0"></b-form-input></b-form-group><b-形式-组id="输入组-4"标签="比索和公斤:"label-for="input-4"><b-表单输入id="输入-4"v-model="item.proposedPetWeight"必需的分钟=0"></b-form-input></b-form-group><b-形式-组id="输入组-4"label="Edad en años:"label-for="input-4"><b-表单输入id="输入-4"v-model="item.proposedPetAge"类型=数字"分钟=0"必需的></b-form-input></b-form-group><b-形式-组id="输入组-6"标签=算法mas?:"label-for="input-6"><b-form-textareaid="输入-6"v-model="item.proposedPetNotes"行=3"最大行数 =6"></b-form-textarea></b-form-group><b-button block pie type="submit" variant="success">更新数据</b-button></b-form></b-card>
</b-row><div>
</模板><脚本>从 'vuex' 导入 { mapState };导出默认{name: "DogsComponente",数据() {返回 {当前用户:{}，宠物:{}、建议宠物名称:"",提议的宠物种族:"",建议宠物高度:"",建议宠物体重:"",建议宠物年龄:"",建议宠物备注:"",}},道具: {消息:字符串，},方法: {getMascotas(){this.$store.dispatch("getMascotaById", {cadena: this.currentUser.user});},更新Mascota(){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,}, "宠物"]).then(({数据}) => {如果(数据==="){警报(错误 alactualizar datos")；} 别的 {警报(已实现")location.reload();}});}},创建(){如果(localStorage.getItem(宠物")){尝试 {this.pets = JSON.parse(localStorage.getItem("pet"));this.proposedPetName = this.pets.dog_namethis.proposedPetRace = this.pets.dog_racethis.proposedPetHeight = this.pets.dog_heightthis.proposedPetWeight = this.pets.dog_weightthis.proposedPetAge = this.pets.dog_agethis.proposedPetNotes = this.pets.dog_notes}赶上(e){localStorage.removeItem("宠物");}}如果(localStorage.getItem(用户")){尝试 {this.currentUser = JSON.parse(localStorage.getItem("user"));}赶上(e){localStorage.removeItem("用户");}}this.getMascotas();},};
如您所见，我尝试修改代码，但它不起作用，它不会预填表格，并且在我尝试更新宠物信息时不会发送任何信息(如果您需要更多信息)关于我的代码的信息我很乐意回答，任何帮助将不胜感激
解决方案
所以这里有一些问题，但它们都是可以克服的.:)
首先，你有...
但是，您的物品(宠物)没有 proposedHeight.他们每个人都有一个常规的旧 height.而且，在您的对象 data 中只定义了一个 proposedHeight，但是您可以为用户拥有的宠物数量设置多个(甚至是无限个)proposedHeights.
因此，我们不仅需要为每只宠物添加一个 v-，还需要为每只宠物创建一个全新的表单:
PetsForm.vue 或其他...
<div><PetForm v-for="pet in pets" :pet="pet" :currentUser="currentUser"></模板><脚本>导出默认{数据() {返回 {当前用户: {}pets: []//注意，数组的默认值应该是 [] 而不是 {}}}}
PetForm.vue 仅用于单个宠物
<div><h3>宠物 {{pet.name}} 或其他形式的表格<标签><input v-model="proposedHeight"><按钮>保存</按钮></模板><脚本>导出默认{道具:['宠物'，'当前用户']，数据() {返回 {建议高度:''}},安装(){this.proposedHeight = this.pet.height}}
注意:我跳过了很多格式.只是想演示一下基础知识:如何使用 `v-if.
在页面上嵌套多个表单.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 an user owns, i am already able to create a prefilled form to update the information of an user here's how i do it
<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>
now i want to do the same but with all the dogs that an user might own, the information of these dogs is stored in an array of objects, where each object in the array stores the information of a dog, here's my code
<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>
as you can see i tried to adapt the code, but it doesn't work, it doesn't prefill the form and it doesn't send any information when i try to update the pets info, if you need any more information about my code i'd be happy to answer, any help would be greatly appreciated
解决方案
So there are a few problems here, but they're all surmountable. :)
First, you have...
<b-form-input
id="input-3"
v-model="item.proposedPetHeight"
required
min="0"
>
However your items (the pets) doesn't have a proposedHeight. They each have a regular old height. And, there's only one single proposedHeight defined in your object data, but you could have many (even INFINITE) proposedHeights for however many pets your user has.
So, we not only need a v-for each pet, but we need to v-for a brand new form for each pet:
PetsForm.vue or whatever...
<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 for just a single pet
<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>
Note: I've skipped a lot of formatting. Just trying to demonstrate the basics: How to nest multiple forms on a page with `v-if.
这篇关于如何使用 vue 从对象数组中提取数据提交预填表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
