Vue Компонент не отображает текст при вызове из лезвия. php файл - PullRequest
Новая
       23

Vue Компонент не отображает текст при вызове из лезвия. php файл

1 голос
/ 09 июля 2020

У меня есть базовый c vue 2.6.11 компонент, который живет в приложении laravel 6. Он живет по адресу resources/js/components. Я создаю базовый c компонент, а затем в моем 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 file 

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

приложение js фрагмент 

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

1 Ответ

2 голосов
/ 09 июля 2020

В 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 {};
    },
});
...

Затем в каком-нибудь родительском элементе того, где вы используете свой компонент, убедитесь, что у него есть идентификатор app. например: 

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

Это основной c пример работы vue на вашем сайте, и не обязательно лучший способ структурировать ваши активы в зависимости от ваших потребностей. Самым большим соображением при их структурировании является то, насколько громоздкими станут ваши активы, если вы включите все в приложение. js.

...