Estoy usando un Carousel de primevue
y no tengo un control completo sobre los eventos que ocurren al moverme por el contenido (es un componente muy complejo), y cuando lo llamo lo hago de la siguiente manera:
<Carousel :value="imagenes">
<template #item="slotProps">
<div class="contenedor">
<img
v-if="propMarker == 1"
class="foto-propiedad"
:src="slotProps.data.original"
:class="{ ultima: slotProps.data == imagenes[4] }"
/>
<img
v-else
class="foto-propiedad"
:src="slotProps.data.thumb"
:class="{ ultima: slotProps.data == imagenes[4] }"
/>
<div
v-if="slotProps.data == imagenes[4]"
class="overlay"
>
<div class="content-overlay ultima"
@click="activarVisible">
Mostrar {{ cantidad - 5 }} fotos más
</div>
</div>
</div>
</template>
</Carousel>
Como pueden ver, hay un v-if="slotProps.data == imagenes[4]"
que muestra un elemento en particular.
Quisiera saber si existe alguna manera de que, cuando se renderiza
<div
v-if="slotProps.data == imagenes[4]"
class="overlay"
>
<div class="content-overlay ultima"
@click="activarVisible">
Mostrar {{ cantidad - 5 }} fotos más
</div>
</div>
Se ejecute una función (tengo que capturar un elemento externo con jquery y aplicarle una clase css), sin necesidad de hacer @click
o cualquier evento por el estilo? Quisiera que la funcion se ejecute cuando el elemento se muestra