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 
    } 
});

コンポーネントがレンダリングされているPHPのブレードファイル。例えば、成分として

<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警告]：不明なカスタム要素： - コンポーネントを正しく登録しましたか？再帰的なコンポーネントの場合、 "name"オプションを指定してください。

ご協力いただければ幸いです。

出典

2017-08-27 Sam

をお試しください – Sam

コンポーネントを2回登録する必要はありません。 componentsセクションを削除し、単にインスタンスの前にVue.componentを追加します。この

ように私はを使用してaswellスクリプトをエクスポートすると私のnav要素が正しいこの

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要素がレンダリングされていません

答えて

関連する問題