Vue.js组件未知自定义元素

时间:2018-07-15 13:55:50

标签: laravel vue.js vue-component

我在Laravel中使用Vuejs,我的组件正在渲染,但是vuejs不断警告我 未知的自定义元素。您是否正确注册了组件?

enter image description here

我不知道我在这里想念的是什么。有时某些组件不起作用。 这是isometimes.js。

App.js

require('./bootstrap');
// require('./manage');

window.Vue = require('vue');


// import 'swiper/dist/css/swiper.css'


import Buefy from 'buefy'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import VueMatchHeights from 'vue-match-heights'
import { swiper, swiperSlide } from 'vue-awesome-swiper'


Vue.component('FeaturedSlider', require('./components/frontend/FeaturedSlider.vue'));
Vue.component('VehicleOffersBlock', require('./components/frontend/vehicles/VehicleOffersBlock.vue'));
Vue.component('LatestNewsBlock', require('./components/frontend/news/LatestNewsBlock.vue'));
Vue.component('FinanceCalculator', require('./components/frontend/FinanceCalculator.vue'));
Vue.component('LatestOffersBlock', require('./components/frontend/offers/LatestOffersBlock.vue'));
Vue.component('AllCompaniesBlock', require('./components/frontend/companies/AllCompaniesBlock.vue'));
Vue.component('SearchVehiclesBlock', require('./components/frontend/SearchVehiclesBlock.vue'));
Vue.component('BrandVehicles', require('./components/frontend/offers/BrandVehicles.vue'));
Vue.component('ModelTopCarusel', require('./components/frontend/vehicles/ModelTopCarusel.vue'));
Vue.component('ModelInsideImages', require('./components/frontend/vehicles/ModelInsideImages.vue'));
Vue.component('TrimSpecifications', require('./components/frontend/vehicles/TrimSpecifications.vue'));
Vue.component('AllOffers', require('./components/frontend/offers/AllOffers.vue'));
Vue.component('MainFooter', require('./components/frontend/MainFooter.vue'));



Vue.use(VueAwesomeSwiper)
Vue.use(Buefy)
Vue.use(VueMatchHeights);



export default {
    components: {
      swiper,
      swiperSlide
    }
  }

主页

<div class="container">
    <search-vehicles-block></search-vehicles-block>
</div>

<featured-slider></featured-slider>

<script>



    var app = new Vue({


      el: '#app',
        data() {
            return {
                frontCoverSwiperOptions: {
                spaceBetween: 30,
                centeredSlides: true,
                        autoplay: {
                            delay: 6000,
                            disableOnInteraction: false
                        },
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                            dynamicBullets: true
                        },
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev'
                        }
                    }
                }
            }
    });
</script>

请帮助我。

谢谢

1 个答案:

答案 0 :(得分:1)

有时甚至出现此问题,然后用-添加组件名称。 尝试这个: Vue.component('search-vehicles-block', require('./components/frontend/SearchVehiclesBlock.vue'));

请清除缓存。