如何在Vue动态传递的prop上实现条件渲染，排除首个card-item的cta展示

现有代码问题说明 #

• 你当前代码中使用addresses.slice(1)遍历，会直接跳过第一个地址不渲染，和你需要「渲染所有地址、仅第一个隐藏cta」的需求不符
• 组件注册属性拼写错误：comonents 需修正为 components

核心实现逻辑 #

利用v-for的索引参数判断是否为第一个元素，条件传入cta属性即可：
当索引为0（第一个元素）时不传入有效值，利用card-item.vue中v-if="cta"的判断自动隐藏cta区域，其余索引正常传入cta值。

修正后的完整profile.vue代码 #

<template>
    <CardItem
        v-for="(address, index) in addresses"
        :key="uniqueKey('address', address)"
        :cta="index === 0 ? undefined : cms.page.cta"
    />
</template>

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

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

可选写法：动态绑定属性对象 #

如果你不想给第一个元素传cta属性，也可以用v-bind动态绑定属性集合：

<CardItem
    v-for="(address, index) in addresses"
    :key="uniqueKey('address', address)"
    v-bind="index === 0 ? {} : { cta: cms.page.cta }"
/>

这种写法下第一个CardItem完全不会接收到cta属性，效果和前面的写法一致。

内容的提问来源于stack exchange，提问作者aleapoffaith