[英]Vue loop array objects into form checkbox
I'm attempting to create an 'edit listing' page where someone's submitted information is displayed back.我正在尝试创建一个“编辑列表”页面,其中显示某人提交的信息。 I'm a bit stuck on how to populate checkboxes in a form with a check on the boxes that were selected the first time.
我对如何通过选中第一次选中的框来填充表单中的复选框感到有点困惑。
I'm aware that checkboxes look for false/true in order to display a check, but my array of something like: [x,y,z] is displayed as just [true] or [false] which leads to all boxes being checked at once and vice versa when using v-model.我知道复选框会查找 false/true 以显示检查,但我的数组如下: [x,y,z] 仅显示为 [true] 或 [false] 导致所有框都被选中使用 v-model 时,一次,反之亦然。
The form表格
<input
type="checkbox"
id="Set Photographer"
value="Set Photographer"
v-model="returnedListing[0].crew_positions"
/>
<label for="Set Photographer">Set Photographer</label>
<input
type="checkbox"
id="Producer"
value="Producer"
v-model="returnedListing[0].crew_positions"
/>
<label for="Producer">Producer</label>
<input
type="checkbox"
id="Production Designer"
value="Production Designer"
v-model="returnedListing[0].crew_positions"
/>
<label for="Production Designer">Production Designer</label>
returnedListing返回列表
const [actors, returnedListing] = await Promise.all([
$axios.$get(`/api/v1/actors/`, {
params: {
user: body
}
}),
$axios.$get(`/api/v1/listings/`, {
params: {
random_public_id: params.id
}
})
]);
return { actors, returnedListing };
Dummy API object虚拟 API object
{
"id": 15,
"title": "NUmber 15",
"start_date": "2021-03-04",
"end_date": "2021-02-16",
"location": "The Bronx",
"overview": "sdfds",
"studio": "sdfdsf",
"poster": null,
"crew_positions": "Set Photographer, Producer, Production Designer",
"post_production_positions": "Editing, AD",
"random_public_id": null,
"date_submitted": null,
"user": 1
}
Essentially I'm looking to figure out how to loop through returnedListing[0].crew_positions if it's value is ['Set Photographer', 'Producer'] and have those 2 boxes checked while 'Production Designer' remains unchecked.本质上,我想弄清楚如何循环返回列表 [0].crew_positions,如果它的值是 ['Set Photographer', 'Producer'] 并选中这两个框,而 'Production Designer' 保持未选中状态。
The first problem (as mentioned in the comments) that the crew_positions
is not an array
, but a comma-separated string
.第一个问题(如评论中提到的),
crew_positions
不是array
,而是逗号分隔的string
。 Then you can iterate over them & set the checkboxes.然后你可以遍历它们并设置复选框。
const returnedListingArray = [{ "id": 15, "title": "NUmber 15", "start_date": "2021-03-04", "end_date": "2021-02-16", "location": "The Bronx", "overview": "sdfds", "studio": "sdfdsf", "poster": null, "crew_positions": "Set Photographer, Producer, Production Designer", "post_production_positions": "Editing, AD", "random_public_id": null, "date_submitted": null, "user": 1 }, { "id": 16, "title": "NUmber 16", "start_date": "2021-03-04", "end_date": "2021-02-16", "location": "The Bronx", "overview": "sdfds", "studio": "sdfdsf", "poster": null, "crew_positions": "Set Photographer, Production Designer", "post_production_positions": "Editing, AD", "random_public_id": null, "date_submitted": null, "user": 1 } ] Vue.component("CrewPositionInput", { props: ["id", "crewPosition", "checked"], methods: { handleCbClick() { this.$emit("update:position-status", this.crewPosition) }, }, template: ` <label:for="id" > <input type="checkbox":id="id":value="crewPosition":checked="checked" @click="handleCbClick" /> {{ crewPosition }} </label> ` }) Vue.component("CrewPositions", { props: ["id", "possibleCrewPositions", "crewPositions"], methods: { toggleCrew({ crew }) { const positions = this.crewPositions.includes(crew)? this.crewPositions.filter(item => item:== crew). [...this,crewPositions. crew] this:$emit("update,crewPositions", positions) }, }: template: ` <div> <crew-position-input v-for="position in possibleCrewPositions":key="position + id":id="position + id":crew-position="position".checked="crewPositions:includes(position)" @update:position-status="(crew) => toggleCrew({ crew })" /> </div> ` }) new Vue({ el, "#app": data() { return { returnedListings, []: possibleCrewPositions, [], } }. mounted() { this.returnedListings = returnedListingArray,map(({ crew_positions, id. //..,rest // commenting out - this is just a snippet, no need for large objects }) => ({ id: crew_positions. crew_positions,split(", "): // splitting string to array })) // just to make it a little more dynamic. this.possibleCrewPositions = [...new Set(this.returnedListings,reduce((a. c) => { return [..,a. ..,c["crew_positions"]] }, []))] }: template: ` <div> <crew-positions v-for="listing in returnedListings".key="listing:id".id="listing:id":possible-crew-positions="possibleCrewPositions".crew-positions.sync="listing['crew_positions']" /> {{ returnedListings }} </div> ` })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div>
CrewPositionInput
is a stateless component that accepts an id
, a crewPosition
& a checked
prop from its parent. CrewPositionInput
是一个无状态组件,它从其父级接受一个id
、一个crewPosition
和一个checked
的 prop。 The only thing it does is that on click
it emits a custom event with the this.crewPosition
as payload.click
时发出一个自定义事件,并将this.crewPosition
作为有效负载。CrewPositions
component is actually a list of CrewPositionInput
components, that passes down props to its children and handles the update:position-status
custom event coming from them. CrewPositions
组件实际上是CrewPositionInput
组件的列表,它将 props 传递给它的子组件并处理来自它们的update:position-status
自定义事件。 On any update:position-status
custom event, it re-emits an array (that is actually a crewPositions
array) to its parent.update:position-status
自定义事件上,它都会向其父级重新发送一个数组(实际上是一个crewPositions
数组)。crew_positions
splitting) & state management (like updating the crew_positions
in the stored array of objects ( returnedListings
). The update is done via .sync
( more on sync here ) - this is a handy method of doing it, but it has its constraints (like naming of the variables & events must follow. a certain pattern).crew_positions
管理(如更新存储的对象数组( returnedListings
列表)中的crew_positions
位置。更新是通过.sync
完成的( 更多关于同步here ) - 这是一种方便的方法它,但它有其限制(如变量和事件的命名必须遵循。某种模式)。 possibleCrewPositions
is just a way of creating the available checkboxes based on the data source (dynamically). possibleCrewPositions
只是一种基于数据源(动态)创建可用复选框的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.