2016-12-31 25 views
5

Tôi có dự án laravel được cài đặt mới với tất cả các thành phần được cập nhật.[Cảnh báo Vue]: Không thể tìm thấy phần tử: #app

Tất cả tôi đã được cố gắng thêm app.js trong tập tin welcome.blade.php của tôi, sau khi thêm sau tôi nhận được lỗi này

[Vue cảnh báo]: Không thể tìm thấy phần tử: #app

Tôi đã theo chủ đề này, nhưng nó không liên quan vì tập lệnh của tôi nằm ở cuối trang. https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work

Dưới đây là tập tin của tôi

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

Trả lời

10

Lỗi nói lên tất cả. Vue không thể tìm thấy #app yếu tố, vì vậy bạn cần phải thêm nó:

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

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

+1

Cảm ơn bạn đã trả lời. Nó giải quyết vấn đề, nhưng tôi đã tự hỏi, tôi thậm chí không có ý định sử dụng Vue vậy tại sao thêm div thêm? – silverFoxA

+0

@silverFoxA nếu bạn không muốn sử dụng 'Vue' thì chỉ cần xóa' require' khỏi tệp 'bootstrap.js' của bạn,' laravel' thêm nó theo mặc định. –

+1

Tôi chỉ gặp vấn đề tương tự như OP, nhưng hóa ra tôi đã làm mọi thứ bài đăng này (cũng như liên kết) gợi ý bạn cần làm: 1. Thêm số div với số id 2. Tham khảo id đó trong JavaScript Vậy làm thế nào để đối phó với điều đó? Vue không chính xác cung cấp thông báo lỗi hữu ích trong lĩnh vực này. – jjpe

Các vấn đề liên quan