Как использовать один компонент vue файла в шаблоне лезвия laravel? - PullRequest
Новая
       7

Как использовать один компонент vue файла в шаблоне лезвия laravel?

0 голосов
/ 29 июня 2018

У меня есть простой компонент таблицы. 

<template>
<div>
    <table class="table table-bordered table-responsive">
        <thead>
        <tr>
            <th v-for="column in headers">{{column}}</th>
        </tr>
        </thead>
        <tbody>
        <tr  v-for="(row, index) in data">
            <td>{{index + 1}}</td>
            <td v-for="column in row">{{column}}</td>
        </tr>
        </tbody>
    </table>
</div>
</template>
<script>
    export default {
        name: "simple-table",
        props: ['headers', 'data']
    }
</script>

<style scoped>

</style>

Я хочу использовать его внутри моего файла шаблона лезвия ларавеллы. Для глобальной регистрации я попробовал: 

import Vue from 'vue'


window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

window.Vue = require('vue');  

Vue.component('simple-table', require('./components/SimpleTable'));

В моем шаблоне клинка: 

<div id="people">
     <simple-table :data="tableData" :headers="columns">
     </simple-table>
</div>
........

 <script>

    const url = "{{url(sprintf("/api/admin/employees/%s/salary-history", $employee->id))}}";


    new Vue({
        el: "#people",            
        data: {
            columns: ['id', 'name', 'age'],
            tableData: [
                { id: 1, name: "John", age: "20" },
                { id: 2, name: "Jane", age: "24" },
                { id: 3, name: "Susan", age: "16" },                 
            ]                
        }
    });




</script>

Но это показывает ошибку: [Vue warn]: неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите опцию «name».

Для локальной регистрации компонента я использовал следующий метод: 

//app.js
import SimpleTable from './components/SimpleTable'
window.SimpleTable = SimpleTable

Затем в моем шаблоне лезвия, когда я пытаюсь использовать, зарегистрируйте его 

....
components: {
   'simple-table': window.SimpleTable
}

Но я все еще получаю ту же ошибку. Если я консоль окна журнала. SimpleTable он отображается как неопределенный

Я использую Laravel Mix с конфигурацией по умолчанию. Что я делаю не так?

1 Ответ

0 голосов
/ 29 июня 2018

Вы запускали npm run dev для компиляции файлов JavaScript?

(что-нибудь в лезвии делает это автоматически, но ничего в ./resources/assets/js)

...