Question

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

无法安装组件：模板或渲染功能未定义。

我构建了一个vue文件，并尝试在刀片bt中显示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命令。

Vue文件数据未显示在刀片​​模板中

2 个答案:

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