Vue 元素未呈现
Posted
技术标签:
【中文标题】Vue 元素未呈现【英文标题】：Vue Element not being rendered 【发布时间】：2018-02-04 22:16:10 【问题描述】：嘿，我正在使用 Vue + Laravel 并使用 webpack.mix 进行包控制。
目前，卡在一个特殊的问题上。我正在尝试在我的 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 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。
任何帮助将不胜感激。
【问题讨论】：
我的导航组件是正确的，因为我使用 导出脚本 【参考方案1】：无需注册您的组件两次。删除components 部分并在实例前简单地添加Vue.component。像这样
试试这个
app.js
Vue.component('example', require('./components/Example.vue'));
Vue.component('navigation', require ('./views/navigation.vue'));
const app = new Vue(
el: '#app'
);
views/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>
【讨论】：
嘿，我已经试过了。但这并没有改变任何东西。 @Sam 我在我的 laravel 项目中尝试了与我的答案完全相同的代码，它使组件渲染得很好。 我真的很困惑，也许我可以创建一个新项目：/ 仍然发布解决方案，我的 vue 文件没有更新，所以如果运行 npm watch 并在浏览器中禁用缓存，请确保包含 --watch-poll。以上是关于Vue 元素未呈现的主要内容，如果未能解决你的问题，请参考以下文章