如何在Vue.js中使用2v-for并将道具数据传递给子组件

Question

我试图遍历这些对象，并希望创建一个公共组件，以便可以调用导入任何页面并使用相同的页面。

对象数组： `

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循环对象。那么，对于不同的页面，如何在公共组件中进行相同的操作呢？

Answer 1

您可以为描述列表创建一个新组件。描述数组将传递给该组件，您可以显示这些描述数组。

<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 />相比，