I have two components: one that logs the indexes of a carousel and I need to pass these indexes into the second component.
First Component
<template>
<div class="container container--white">
<Header />
<carousel-3d
@after-slide-change="onAfterSlideChange"
:width="250"
:height="300"
class="main__carousel"
>
<slide v-for="(img, i) in images" :key="i" :index="i">
<img :src="img.src" />
</slide>
</carousel-3d>
<CircleBottom v-bind:images="images" />
</div>
</template>
export default {
.
.
.
methods: {
onAfterSlideChange(index) {
// eslint-disable-next-line no-console
console.log(index);
}
}
};
</script>
Second Component - Where index needs to be placed:
:src="articles[{{index}}].img"
<template>
<div class="main__bottom-articles">
<article class="articles__view">
<div class="articles__view-top">
<button @click="onCloseClick">-</button>
<h1>{{articles[1].title}}</h1>
<p>{{articles[1].desc}}</p>
</div>
<div class="articles__view-bottom">
<img :src="articles[1].img" width="340px" height="auto" />
</div>
</article>
</div>
</template>