I have a library https://splade.dev/docs/using-vue-libraries. I’m using the Splade table.
I have app.js:
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
const el = document.getElementById("app");
const app = createApp({
render: renderSpladeApp({ el }),
})
.use(SpladePlugin, {
"max_keep_alive": 10,
"transform_anchors": false,
"progress_bar": true,
})
.component('Carousel', Carousel)
.component('CarouselSlide', Slide)
.component('CarouselCharts', Chart)
.component('CarouselPagination', Pagination)
.component('CarouselNavigation', Navigation)
.mount(el);
There are also test data in the controller:
$products = [
[
'id' => 1,
'name' => 'T-shirt',
'price' => 20.99,
'description' => 'Simple T-shirt',
],
[
'id' => 2,
'name' => 'Jeans',
'price' => 39.99,
'description' => 'Classic jeans',
],
];
And I don’t know what to display in Blade.”
I tried adding this, but it doesn’t work:
<Carousel>
@foreach($charts as $key => $chart)
<CarouselSlide key="{{ $key }}">
<CarouselCharts :chart-data="$chart" />
</CarouselSlide>
@endforeach
<template #addons>
<CarouselNavigation />
<CarouselPagination />
</template>
</Carousel>