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

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 />