[Vue公司提醒]:用更新的所有组件#APP

[Vue公司提醒]:用更新的所有组件#APP

问题描述:

我有一个新的安装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> 

错误说明了一切。 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。 添加一个div一些ID 2.请参阅该id在JavaScript中 那么如何处理呢?在这方面,Vue并没有给出有用的错误信息。 – jjpe