2016-12-31 10 views
5

すべてのコンポーネントが更新された新しくインストールされたlaravelプロジェクトがあります。[Vue警告]:要素を見つけることができません:#app

はすべて私が追加した後、私のwelcome.blade.phpファイルにapp.jsを追加しようとしたんでした私はこのエラーを取得するには、次

[Vueの警告]:要素が見つかりません:#appを

私はこのスレッドに従いましたが、私のスクリプトはページの一番下にあるので、関係はありません。 https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work

はここ

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>{{$project}} | {{ $title }}</title> 

    <!-- Fonts --> 
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"> 

    <!-- Styles --> 
    <link href="/css/app.css" rel="stylesheet" type="text/css"/> 

    <style> 
     ... 
    </style> 
    </head> 
    <body class="sticky-nav"> 
    <div id="nav"> 
    <div class="display-sm"> 
     <header class="top-header"> 
      <span class="menu-icon">☰</span> 
     </header> 
    </div> 
     <div class="custom-container"> 
     <div id="logo" class="float-left"> 
      <img alt="xyz" src="/images/xyz.png"/><span> xyz</span> 
     </div> 
     <div id="btn-project" class="float-right"> 
      <a title="project" href="#" class="btn btn-project">Project</a> 
     </div> 
    </div> 
    </div> 
    <div class="sub-container"> 
    <h1 id="header-title">{{ $header_title }}</h1> 
    <h2 id="meta-data"><i class="fa fa"></i>{{$location}} <span id="category"> <i></i>{{$category}} </span></h2> 
    <div class="clear"></div> 

    </div> 
    <script src="/js/app.js"></script> 
    <script> 
    var wrap = $(".sticky-nav"); 

    wrap.on("scroll", function (e) { 

     if (this.scrollTop > 147) { 
      wrap.find('#nav').addClass("fix-nav"); 
     } else { 
      wrap.find('#nav').removeClass("fix-nav"); 
     } 

     }); 
    </script> 
    </body> 
    </html> 

答えて

10

エラーはそれをすべて言う私のファイルです。 Vueが#app要素を見つけることができませんので、あなたはそれを追加する必要があります。

<div id='app'></div> 

https://vuejs.org/v2/guide/

+1

答えをいただき、ありがとうございます。それは問題を解決しましたが、私はVueを使用するつもりはないので、余分なdivを追加するのはなぜですか? – silverFoxA

+0

@silverFoxA 'Vue'を使いたくない場合、' bootstrap.js'ファイルから 'require'を削除するだけで、' laravel'がデフォルトで追加します。 –

+1

私はOPと同じ問題に遭遇しましたが、私はすでにこの投稿(リンクだけでなく)のすべてをやったことが分かりました: 1.あるIDを持つdivを追加してください 2.そのIDを参照してくださいJavaScriptの場合 そのように対処するには?この点に関して、Vueは正確には有用なエラーメッセージを出すわけではありません。 – jjpe

関連する問題