时间戳

首页 > 解决方案 > 如何对动态道具进行条件渲染

vue.js - 如何对动态道具进行条件渲染

问题描述

我正在尝试在动态传递的道具上添加条件渲染。我有一个名为的组件card-item.vue，它将 prop 传递cta给 component profile.vue。现在，profile.vue我希望道具cta显示在card-item除第一个组件之外的每个组件上。

这是我的card-item.vue：

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

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

个人资料.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>

配置文件.json：

{
  "cta": "Report"
}

在我的<CardItem />组件中，我正在呈现地址。:cta因此，除了第一个地址，我希望在每个地址上都有我的地址。

我正在尝试类似的东西： v-if="addresses[0] ? {cta="null"} : "cms.page.cta"" 我知道这是不正确的语法，但我正在努力实现。

请任何帮助将不胜感激。

标签： vue.jsvuejs2

解决方案

v-for 还支持可选的第二个参数作为当前项目的索引。--vue文档

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

推荐阅读