Carousel Button Not Working
User
{{ item.title }}
{{ item.description }}
btn link not working in vuetify cairsoul
Assistant
If your “ link inside the Vuetify “ isn't working, it's usually due to **“ using `display: flex; overflow: hidden`**, which can cause issues with clickable elements like buttons or links.
### ✅ Quick Fix
Add the `eager` prop to “. This forces the content to render immediately, which often resolves interaction issues:
<v-carousel-item
v-for="item in portfolioItems"
:key="item.id"
eager
>—
### ✅ Alternative Fix: Wrap with “
Sometimes wrapping the card content with a “ can fix event bubbling issues:
<v-carousel-item
v-for="item in portfolioItems"
:key="item.id"
eager
>
<div>
<v-card class="mx-auto">
<v-img
class="align-end text-white"
height="auto"
:src="item.image"
cover
opacity="0.5"
></v-img>
<v-card-title class="text-h4 text-wrap">{{ item.title }}</v-card-title>
<v-card-text>
{{ item.description }}
</v-card-text>
<v-card-actions>
<v-btn color="primary">Share</v-btn>
<v-btn
color="primary"
:href="item.url"
target="_blank"
rel="noopener noreferrer"
>Explore</v-btn>
</v-card-actions>
</v-card>
</div>
</v-carousel-item>—
### 🧪 Also double-check:
1. **Make sure `item.url` is a valid URL** (e.g. `https://example.com`).
2. **Do not use the `text="Explore"` syntax** — use slot or `default` slot text like `>Explore` (you're using Vue 3 + Vuetify 3 syntax).
3. **No CSS overriding `pointer-events` or `z-index`** on parent elements.
Let me know if you want to make the whole card clickable too!