我正試圖在動態傳遞的道具上添加條件渲染。我有一個名為card-item.vue的組件，它正在將道具cta傳遞給組件profile.vue。
現在在profile.vue中，我希望道具cta顯示在每個card-item組件上，除了第一個組件。
下面是我的card-item.vue：
<template>
<span v-if="cta">
{{ cta }}.
</span>
</template>
<script>
出口默認 {
name: 'card-item',
props: {
cta: {
型別。型別：字串
}
}
}
</script>
profile.vue:
<template>
<CardItem
v-for="address in addresses.slice(1)"
:key="uniqueKey('address', address)"
:cta="cms.page.cta" // 僅從第一個地址中洗掉cta
/>
</template>
<script>
從"./card-item "匯入CardItem。
const data = require('./profile.json');
出口默認 {
name: 'profile',
comonents: {
CardItem,
},
props: {
cms: {
型別。物件。
默認的。() => {
回傳 {
page: data
}
}
}
}
}
</script>
profile.json:
{
"cta": "報告"
在我的<CardItem />組件中我正在渲染地址。所以我希望我的:cta在每個地址上，除了第一個地址。
我正在嘗試類似的方法。
請提供任何幫助。 uj5u.com熱心網友回復： v-for也支持一個可選的第二個引數，即當前專案的索引。
當前專案的索引。-- vue docs
標籤：v-if="addresses[0] ? {cta="null"} : "cms.page.cta""/code>
我知道這是不正確的語法，但我想達到的目的是一樣的。
<CardItem
v-for="(address, index) in addresses.slice(1)"
:key="uniqueKey('address', address)"
:cta="index !==0 ? cms.page.cta : null" // 僅從第一個地址中洗掉cta
/>