I am trying to loop through these objects and want to make a common component so that I can call import any pages and use the same.

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'],
            }
        ]

[This is the code I want to make a common component and call the props. `

<v-row justify="start" >
<template v-for="(item, key) in coreFeatures">
   <v-col :key="'item-'   key" cols="12" md="4">
      <div >
         <div >{{ item.number }}</div>
           <div >{{ item.title }}</div>
           <div >{{ item.titleTwo }}</div>
           <div >
              <ul v-for="(item1, key1) in item.descriptionTwo" :key="'item-'   key1" >
                  <li >{{item1}}</li>
               </ul>
           </div>
         </div>
</template>
</v-row>

`]2

Here I have used two v-for to loop through the objects. So how can I do the same in a common component for different pages?

CodePudding user response：

You can make a new component for description list. Array of description will be passed to that component and you can display those array of descriptions.

<template>
   <ul v-for="(description, key) in descriptions" :key="'item-'   key" >
     <li >{{description}}</li>
   </ul>
</template>

export default {
  name: "DescriptionList",
  props:{
    descriptions:{
     type: Array,
     required: true
    }
  }
}

And than inside your previous code <DescriptionList :descriptions=item.descriptionTwo />