从blade.php文件调用时，Vue组件不显示文本

Question

我有一个基本的vue 2.6.11组件，它位于laravel 6应用程序中。它住在resources/js/components。我创建了一个基本组件，然后在我的app.js文件中导入了vue并定义了我的vue组件。然后，在我的app.blade.php中，我使用了vue组件，但是我的<template><div>Text here</div></template>中的文本不会出现在屏幕上。出现<h1>文本，但不显示vue组件文本。我看了其他的帖子，但是vue版本，这里使用的其他问题都是2-3年前的，不适用。感谢您的帮助，谢谢。

TableDraggable.vue

<template>
    <div>
        <h1>Test Text</h1>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('this component has been mounted');
        }
    }
</script>

我在app.blade.php文件中使用的内容

<h1>This is a test to see if VUE is working</h1>
<table-draggable></table-draggable>

app.js代码段

//Bring in VUE and vue draggable
window.Vue = require('vue');
import VueDraggable from 'vuedraggable';
Vue.component('table-draggable', require('./components/TableDraggable'));

Answer 1

在app.js中，尝试执行以下操作：

...
window.Vue = require('vue');

import VueDraggable from 'vuedraggable';
Vue.use(VueDraggable);

import TableDraggable from './components/TableDraggable';
Vue.component('table-draggable', TableDraggable);

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

    data() {
        return {};
    },
});
...

然后，在您使用组件的某个父元素中，确保它的id为app。例如：

<div id="app">
    <h1>This is a test to see if VUE is working</h1>
    <table-draggable></table-draggable>
</div>

这是让vue在您的站点上工作的一个基本示例，但不一定是根据您的需要构建资产结构的最佳方式。关于如何组织这些内容的最大考虑因素是，如果您将所有内容都包含在app.js中，您的资产将会变得多么庞大。