Laravel VueJS - 找不到元素：#navigation答案

【问题标题】：Laravel VueJS - Cannot find element: #navigationLaravel VueJS - 找不到元素：#navigation
【发布时间】：2017-12-07 18:46:41
【问题描述】：

我是 Laravel 和 VueJs 的新手。

我目前的问题是这三件事：

[Vue 警告]：找不到元素：#navigation
[Vue 警告]：找不到模板元素或为空：#navigation
vue.js:437 [Vue 警告]：无法挂载组件：未定义模板或渲染函数。

这是我的 navigation.vue 文件

<template id="navigation">
  <div class="c-header col-xs-12 col-sm-12 colmd-12 col-lg-12">
    <div class="u-tab-menu">
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/home">home</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/about">about</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/products">products</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/services">services</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/contact">contact</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/qa">qa</router-link>
    </div>
  </div>
  </div>
</template>

<script type="text/javascript">
  export default {}
</script>

这是我的 routes.js 文件

// import components into routes.js here
import home from './components/home.vue'
import about from './components/about.vue'
import products from './components/products.vue'
import services from './components/services.vue'
import contact from './components/contact.vue'
import qa from './components/qa.vue'

var router = new VueRouter();

router.map({
  path: "/home",
  component: "home"
}, {
  path: "/about",
  component: "about"
}, {
  path: "/products",
  component: "products"
}, {
  path: "/services",
  component: "services"
}, {
  path: "/contact",
  component: "contact"
}, {
  path: "/qa",
  component: "qa"
});

export default router

这是我的 main.js 文件

import Vue from 'vue'
import VueRouter from 'vue-router'

import {
  routes
} from './routes.js'
import navigation from './components/navigation.vue'

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

Vue.use(vueRouter);
router.start(navigation, '#app');

require('./bootstrap');

window.Vue = require('vue');

这是我的 .blade.php 文件

<!doctype html>
<html lang="{{ config('app.locale') }}">

<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>Laravel Test Application</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
  <script type="text/javascript" src="https://unpkg.com/vue-router@2.6.0/dist/vue-router.js"></script>
  <!--<script type="text/javascript" src="resources/assets/js/main.js"></script>-->
  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
  <!-- Styles -->
  <link href="{{ elixir('css/app.css') }}" rel="stylesheet" type="text/css">
  <link href="{{ elixir('css/main_style.css') }}" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="container">
    <div class="row">
      <div id="app">
        <!-- Root Vue Instance -->

        <navigation></navigation>
        @{{ testData }}
      </div>
    </div>

    <router-view></router-view>

  </div>

  <script type="text/javascript">

    Vue.component('navigation', {
      template: '#navigation'
    });

    const app = new Vue({

      el: '#app',
      data: {
        testData: "Some text here"
      },
      methods: {

      },
      router: this.router
    }).$mount('#app')

  </script>

</body>

</html>

我不知道从哪里开始解决这个问题以及它为什么这样做。我基本上已经将所有部分放在一起以使其工作，但我看不出错误在哪里。请帮忙。提前致谢。

【问题讨论】：

col-xs-2 col-sm-2 col-md-2 col-lg-2 可以简化为col-2。没有名为col-xs-2 的类。 Bootstrap 是移动优先的。

标签： javascript php laravel-5 vue.js

【解决方案1】：

我有同样的错误。我通过用

包围 Vue 声明来解决它

$(document).ready(function() { .... };

【讨论】：