Vue 文件数据未显示在 Blade 模板中

Question

Vue 文件数据未显示在 Blade 模板中。 控制台出现的错误是：

挂载组件失败：未定义模板或渲染函数。

我构建了一个 vue 文件并尝试在刀片中显示 vue 的数据，但它没有显示帮助我。

这是我的主要 js 文件 app.js

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue';
Vue.component('chat-form-component', require('./components/ChatFormComponent.vue').default);
new Vue({
    el: '#app',
    render: h => h(App)
})

这是vue文件ChatFormCompnent.vue

<template>
<div class="container">
<div class="row justify-content-center">
    <form class="form">
        <textarea
            cols="25"
            rows="5"
            class="form-input">
        </textarea>
        <span class="notice">
            Hit Return to send a message
        </span>
    </form>
    </div>
 </div>
</template>

<script>
export default {
    mounted() {
        console.log('Component mounted.')
    }
 }
</script>

<style>
.form {
    padding: 8px;
}
.form-input {
    width: 100%;
    border: 1px solid #d3e0e9;
    padding: 5px 10px;
    outline: none;
}
.notice {
    color: #aaa
}

</style>

这是刀片模板chat.blade.php

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Chats</div>
                    <div class="card-body">
                        Chats
                    </div>
                </div>
                <chat-form-component></chat-form-component>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">Users</div>
                    <div class="card-body">
                        Users
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Answer 1

您需要在更改后重新编译您的资产。 运行以下命令之一

npm run watch
npm run watch-poll

另外，请在运行命令后刷新浏览器。

您可以进一步阅读laravel documentation。

Answer 2

在这行render: h => h(App) 中，您没有导入App 组件。如果你只是跟随 Laravel + Vue 脚手架，它不使用 App 组件，所以你可以删除该行。

确保您的 layouts.app 刀片有这样的内容：

<div id="app">
    @yield('content')
</div>

另外，按照 ashish.negi 的回答运行 watch 命令。