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。例如：

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

这是在网站上使用vue的基本示例，不一定是根据需要构建资产的最佳方法。有关如何组织这些内容的最大考虑因素是，如果将所有内容都包含在app.js中，资产将变得多么庞大。

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

1 个答案: