проблема с vue -Slick в laravel проекте

Question

У меня возникла проблема с использованием vue -slick карусели в моем проекте laravel. Я импортирую его в основной файл. js file import VueSlickCarousel from 'vue-slick-carousel' Vue .use (VueSlickCarousel);

components: {
        VueSlickCarousel
    },

это компонент в моем блейд-файле

<VueSlickCarousel :arrows="true" :dots="true">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </VueSlickCarousel>

это ошибка в консоли [Vue warn]: неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите опцию «name».

, пожалуйста, помогите мне, заранее спасибо.

код компонента:

@push('scripts')
<script type="text/x-template" id="products-slider">
    <div class="container" style="overflow:hidden;">
        <div class="row">
            <div class="col-12">
                <h2 class="section-divider">
                    <span>
                        {{__('shop::app.home.new-products')}}
                    </span>
                    {{-- <a href="">view all</a> --}}
                </h2>
                <VueSlickCarousel :arrows="true" :dots="true">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                </VueSlickCarousel>
                {{-- <section class="regular slider">

                    @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', {
        import VueSlickCarousel from 'vue-slick-carousel',

        template: '#products-slider',

        components: {
            VueSlickCarousel
        },

        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>

@ endpu sh

Answer 1

В коде компонента:

 <script type="text/x-template" id="products-slider">
        <div class="container" style="overflow:hidden;">
            <div class="row">
                <div class="col-12">
                    <h2 class="section-divider">
                        <span>
                            {{__('shop::app.home.new-products')}}
                        </span>
                        {{-- <a href="">view all</a> --}}
                    </h2>
                    <VueSlickCarousel :arrows="true" :dots="true">
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                    </VueSlickCarousel>
                    {{-- <section class="regular slider">

                        @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>

В основном. js:

    import VueSlickCarousel from 'vue-slick-carousel'

    const app = new Vue({
    el: '.element',
    components: { VueSlickCarousel } // Note!!!
});

Не забудьте восстановить переднюю часть

Answer 2

моя проблема исправлена ​​с:

Vue.component("VueSlickCarousel", require("vue-slick-carousel"));

вместо:

import VueSlickCarousel from 'vue-slick-carousel'
components: { VueSlickCarousel }

Answer 3

Импорт vue - щелкните локально в своем компоненте и удалите глобальную регистрацию

Например

<script>
    import VueSlickCarousel from 'vue-slick-carousel'

    export default {
        components: {VueSlickCarousel}
    }
</script>