如何使用 2 v-for 并将 props 数据传递给 Vue.js 中的子组件
How to use 2 v-for and pass props data to child components in Vue.js
我正在尝试遍历这些对象并想制作一个通用组件,以便我可以调用导入任何页面并使用它们。
Array of objects:
`
coreFeatures: [
{
title: 'Automation across the entire Tech stack',
descriptionTwo: [
'Any browser-based workflow through UI or programmatically',
'Desktop-based workflows on applications within Windows ',
'Linux or macOS',
'Tedious tasks involving multiple applications by sending and receiving HTTP requests to third-party APIs',
'Citrix-based virtual applications by using image-based control',
],
number: '01',
},
{
number: '02',
title: 'Multiple Automation Agents ',
descriptionTwo: [
'Achieve 100% savings on infra scaling & Additional SOX Cost',
'Eliminate GUI based automation for SAP with SAP NetWeaver ABAP Automation Studio ',
'Realize speed and reliability with Low-code RPA Agent employing libraries as opposed to traditional coding',
'Conquer challenges of automation in API based systems like ServiceNow, Salesforce with API Agent',
],
},
{
number: '03',
title: 'Desktop-less automation',
descriptionTwo: [
'Move from user processes to business process automation',
'No more code-writing ',
'Attach the Automation Agent and Bots',
'Add it to forms and Automation Services',
],
},
{
number: '04',
title: 'Workflow Studio ',
titleTwo: '80% bots enabled by SAP Automation Agent and RPA Agent, running without desktop',
descriptionTwo: ['Saves greatly on infrastructure', 'Avoids latency ', 'Supports hyper scaling'],
}
]
[这是我想制作一个通用组件并调用道具的代码。
`
<v-row justify="start" class="card-wrap ma-0">
<template v-for="(item, key) in coreFeatures">
<v-col :key="'item-' + key" cols="12" md="4">
<div class="simple-card-wrapper">
<div class="simple-card-number">{{ item.number }}</div>
<div class="simple-card-head">{{ item.title }}</div>
<div class="semi-bold-two">{{ item.titleTwo }}</div>
<div class="simple-card-description">
<ul v-for="(item1, key1) in item.descriptionTwo" :key="'item-' + key1" class="features-description-ul">
<li class="features-desc-list">{{item1}}</li>
</ul>
</div>
</div>
</template>
</v-row>
`]2
这里我使用了两个 v-for 来遍历对象。那么如何在不同页面的通用组件中做同样的事情呢?
您可以为描述列表创建一个新组件。描述数组将传递给该组件,您可以显示这些描述数组。
<template>
<ul v-for="(description, key) in descriptions" :key="'item-' + key" class="features-description-ul">
<li class="features-desc-list">{{description}}</li>
</ul>
</template>
export default {
name: "DescriptionList",
props:{
descriptions:{
type: Array,
required: true
}
}
}
而且比在你之前的代码里面 <DescriptionList :descriptions=item.descriptionTwo />
我正在尝试遍历这些对象并想制作一个通用组件,以便我可以调用导入任何页面并使用它们。
Array of objects: `
coreFeatures: [
{
title: 'Automation across the entire Tech stack',
descriptionTwo: [
'Any browser-based workflow through UI or programmatically',
'Desktop-based workflows on applications within Windows ',
'Linux or macOS',
'Tedious tasks involving multiple applications by sending and receiving HTTP requests to third-party APIs',
'Citrix-based virtual applications by using image-based control',
],
number: '01',
},
{
number: '02',
title: 'Multiple Automation Agents ',
descriptionTwo: [
'Achieve 100% savings on infra scaling & Additional SOX Cost',
'Eliminate GUI based automation for SAP with SAP NetWeaver ABAP Automation Studio ',
'Realize speed and reliability with Low-code RPA Agent employing libraries as opposed to traditional coding',
'Conquer challenges of automation in API based systems like ServiceNow, Salesforce with API Agent',
],
},
{
number: '03',
title: 'Desktop-less automation',
descriptionTwo: [
'Move from user processes to business process automation',
'No more code-writing ',
'Attach the Automation Agent and Bots',
'Add it to forms and Automation Services',
],
},
{
number: '04',
title: 'Workflow Studio ',
titleTwo: '80% bots enabled by SAP Automation Agent and RPA Agent, running without desktop',
descriptionTwo: ['Saves greatly on infrastructure', 'Avoids latency ', 'Supports hyper scaling'],
}
]
[这是我想制作一个通用组件并调用道具的代码。 `
<v-row justify="start" class="card-wrap ma-0">
<template v-for="(item, key) in coreFeatures">
<v-col :key="'item-' + key" cols="12" md="4">
<div class="simple-card-wrapper">
<div class="simple-card-number">{{ item.number }}</div>
<div class="simple-card-head">{{ item.title }}</div>
<div class="semi-bold-two">{{ item.titleTwo }}</div>
<div class="simple-card-description">
<ul v-for="(item1, key1) in item.descriptionTwo" :key="'item-' + key1" class="features-description-ul">
<li class="features-desc-list">{{item1}}</li>
</ul>
</div>
</div>
</template>
</v-row>
`]2
这里我使用了两个 v-for 来遍历对象。那么如何在不同页面的通用组件中做同样的事情呢?
您可以为描述列表创建一个新组件。描述数组将传递给该组件,您可以显示这些描述数组。
<template>
<ul v-for="(description, key) in descriptions" :key="'item-' + key" class="features-description-ul">
<li class="features-desc-list">{{description}}</li>
</ul>
</template>
export default {
name: "DescriptionList",
props:{
descriptions:{
type: Array,
required: true
}
}
}
而且比在你之前的代码里面 <DescriptionList :descriptions=item.descriptionTwo />