扩展包含ID为“app”的div的布局时,Vue元素将不会加载,并给出错误“找不到元素:app”
我试着做了一个新的布局,就是把@yield包装在一个id为app的div中,一个非常简单的组件,得到相同的结果。
示例组件.vue
<template>
<div class="container">
{{ count }}
</div>
</template>
<script>
export default{
data() {
return {
count: 0
}
}
}
</script>
应用程序js
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
欢迎.blade.php
@extends('layouts.new')
@section('content')
<example-component></example-component>
@endsection
new.blade.php文件
<head>
<script src="{{ asset('js/app.js') }}"></script>
</head>
<body>
Hello
<div id="app">
@yield('content')
</div>
</body>
我希望数字0出现在页面上,但未显示任何内容,控制台中出现错误:
“[Vue warn]:找不到元素:app”
当检查页面时,示例组件被包装在一个id为app的div中。
为什么我会犯这个错误?
