Question

扩展包含ID为“ app”的div的布局时，不会加载vue元素，并显示错误“找不到元素：#app”

我尝试制作一个新的布局，它只是将@yield包裹在一个div中，其ID为app，它是一个非常简单的组件，并且得到相同的结果。

ExampleComponent.vue

<template>
    <div class="container">
        {{ count }}
    </div>
</template>

<script>
export default{
    data() {
        return {
            count: 0
        }
    }
    }
</script>

app.js

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
});

welcome.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警告]：找不到元素：#app”

在检查页面时，示例组件被包装在一个ID为app的div中。

为什么会出现此错误？

Answer 1

您的app.js脚本将在加载#app div之前首先执行。

将脚本放在<body>标记的末尾，而不是放在<head>的内部：

<body>
    Hello
    <div id="app">
        @yield('content')
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>

扩展布局时，Vue组件找不到#app

1 个答案: