How to do conditional rendering on dynamic props-CodePudding

I'm trying to add conditional rendering on the dynamically passed prop. I have a component called card-item.vue which is passing the prop cta to component profile.vue. Now in profile.vue I want the prop cta to display on every card-item component except the first one.

Here is my card-item.vue:

<template>
  <span v-if="cta">
    {{ cta }}
  </span>
</template>

<script>
export default {
  name: 'card-item',
  props: {
    cta: {
      type: String
    }
  }
}
</script>

profile.vue:

<template>
    <CardItem
        v-for="address in addresses.slice(1)"
        :key="uniqueKey('address', address)"
        :cta="cms.page.cta" // remove cta from the first address only
    />
</template>

<script>

import CardItem from "./card-item";
const data = require('./profile.json');

export default {
  name: 'profile',
  comonents: {
    CardItem,
  },
  props: {
    cms: {
      type: Object,
      default: () => {
        return {
          page: data
        }
      }
    }
  }
}

</script>

profile.json:

{
  "cta": "Report"
}

In my <CardItem /> component I'm rendering addresses. So I want my :cta on every address except the first one.

I was trying something like: v-if="addresses[0] ? {cta="null"} : "cms.page.cta"" I know this is incorrect syntax but somewhat I'm trying to achieve.

Please any help would be appreciated.

CodePudding user response：

v-for also supports an optional second argument for the index of the current item. -- vue docs

<CardItem
    v-for="(address, index) in addresses.slice(1)"
    :key="uniqueKey('address', address)"
    :cta="index !== 0 ? cms.page.cta : null" // remove cta from the first address only
/>