Vue元素未呈现

嘿，我正在使用Vue + Laravel并使用webpack.mix进行包控制。Vue元素未呈现

目前，陷入了一个奇怪的问题。我正尝试在我的app.js文件中渲染组件。

App.js

Vue.component('navigation',require ('./views/navigation.vue')); 
Vue.component('Example', require('./components/Example.vue')); //this works 
const app = new Vue({ 
    el: '#app', 
    components: { 
    navigation 
    } 
});

其中组分所呈现腓刀片文件。

<body> 

    <div id="app"> 
     <div class="container"> 
      <navigation></navigation> 
     </div>   
    </div>

我的导航组件

<template> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data- 
     toggle="collapse" data-target="#navbar" aria-expanded="false" aria- 
     controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav>

如示例组件出现开箱所以它的工作原理，但导航组件吐出这个错误。

app.js：814 [Vue warn]：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，确保提供“名称”选项。

任何帮助，将不胜感激。

来源

2017-08-27 Sam

我的导航组件是正确的，因为我导出脚本使用藏汉 – Sam

无需注册您的组件两次。删除components部分，并简单地在实例之前添加Vue.component。像这样

试试这个

app.js

Vue.component('example', require('./components/Example.vue')); 

Vue.component('navigation', require ('./views/navigation.vue')); 

const app = new Vue({ 
    el: '#app' 
});

的意见/ navigation.vue

<template> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" 
         class="navbar-toggle collapsed" 
         data-toggle="collapse" 
         data-target="#navbar" 
         aria-expanded="false" 
         aria-controls="navbar" 
       > 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Project name</a> 
      </div> 
      <div id="navbar" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#about">About</a></li> 
        <li><a href="#contact">Contact</a></li> 
       </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
    </nav> 
</template> 

<script> 
    export default { 
     mounted() { 
      console.log('Component mounted.') 
     } 
    } 
</script>

来源

2017-08-27 14:00:45

嘿，我已经试过了。但它并没有改变任何东西。 – Sam

@Sam我已经尝试了我的答案在我的laravel项目中完全相同的代码，它呈现组件就好了。 –

我真的很困惑也许我可能会创建一个新项目：/ – Sam

Vue元素未呈现

回答

相关问题