Problem with vue-slick in laravel project

I facing a problem with using vue-slick carousel im my laravel project I import it in main.js file
import VueSlickCarousel from ‘vue-slick-carousel’ Vue.use(VueSlickCarousel);
components: {
VueSlickCarousel
},
this is the component in my blade file

@push(‘scripts’)






{{__(‘shop::app.home.new-products’)}}

{{-- view all --}}



1

2

3

4


{{--
                    @foreach (app('Webkul\Product\Repositories\ProductRepository')->getNewProducts() as $productFlat)
    
                            @include ('shop::products.list.old-card', ['product' => $productFlat])
    
                    @endforeach
                </section> --}}
            </div>
        </div>
    </div>
</script>

<script>

    Vue.component('products-slider', {
        template: '#products-slider',

        data: function() {
            return {
                //products datat from API
                products: [],
            }
        },

        mounted: function () {
            this.fetchProducts();
        },

        methods: {
            // get products API
            getProducts () {
                return axios.get('{{url("/")}}/api/products?new=1&limit=6&order=desc&sort=created_at')
                /* .then(response => {
                    const products = response.data.data;
                    this.products = products;
                    console.log(this.products);
                }) */

                /*try{
                    let prod = await axios.get('http://localhost/kshopnew/public/api/products');
                    const products = prod.data.data;
                    this.products = products;
                }catch(e){

                }*/
                
                /*.then(response => {
                    this.products = response.data
                })
                .catch(e => {
                    this.errors.push(e)
                })*/                
            },

            // fetch products data
            fetchProducts () {
                this.getProducts ().then(response => {
                    const products = response.data.data;
                    this.products = products;
                    /* console.log(this.products); */
                })
            },
        }

    })

</script>

@endpush

The code provided is currently not properly formatted for this forum. In its current state it’s illegible which makes it hard for people to help you.

Please read the following guide about how to properly format code and then edit your topic accordingly.

Thanks!

1 Like

OK, Thanks