我正在嘗試遍歷這些物件并想要制作一個通用組件，以便我可以呼叫匯入任何頁面并使用相同的。
物件陣列： `
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'],
}
]
[這是我想做一個通用組件并呼叫props的代碼。`
<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 來回圈遍歷物件。那么如何在不同頁面的通用組件中做同樣的事情呢？
uj5u.com熱心網友回復：
您可以為描述串列創建一個新組件。描述陣列將傳遞給該組件，您可以顯示這些描述陣列。
<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 />
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/432665.html
標籤：javascript Vue.js v-for Vue 道具
上一篇：更新嵌套陣列中的物件
下一篇：在網址中使用I18n