Vue.js — компонент с двумя строками

Я новичок в Vue.js и хотел бы использовать компонент. У меня есть (динамическая) таблица с машинами (SN = серийный номер) и их деньгами для каждого источника, поэтому я хочу использовать rowspan. Каждая строка будет экземпляром компонента, потому что у нее есть собственный флажок, и я хотел бы поработать с ним позже. Проблема в том, что я не знаю, как использовать цикл с созданием компонента, который немного сложен внутри таблицы. Вот пример:

<div id="container">
    <table border="1">
        <template v-for="row in storage.rows">
            <tr>
                <td rowspan="2"><input type="checkbox"></td>
                <td rowspan="2">{{row.sn}}</td>
                <td>{{row.source}}</td>
            </tr>
            <tr>
                <td>{{row.pair.source}}</td>
            </tr>
        </template>
    </table>
</div>

<script>
    new Vue({
        el: '#container',

        data: {
            storage: {
                rows: [
                    {sn: 111, source: 'EK', pair: {source: 'VLT', in: 100}},
                    {sn: 222, source: 'EK', pair: {source: 'VLT', in: 200}}
                ]
            }
        },


    });
</script>

Это отлично работает, но я не знаю, как преобразовать шаблон в компонент. С Vue.js я использую Laravel и его механизм шаблонов Blade, поэтому у меня есть обходной путь:

<div id="container">
    <table border="1">
        @foreach($differences as $difference)
            <tr is="ek" diff="{{ json_encode($difference) }}"></tr>
            <tr is="vlt" diff="{{ json_encode($difference->pair) }}"></tr>
        @endforeach
    </table>
</div>

<template id="ek-template">
    <tr>
        <td rowspan="2"><input type="checkbox"></td>
        <td rowspan="2">@{{ difference.sn }}</td>
        <td>@{{ difference.source }}</td>
    </tr>
</template>

<template id="source-template">
    <tr>
        <td>@{{ difference.source }}</td>
    </tr>
</template>

<script>
    new Vue({
        el: '#container',

        data: {
            storage: {
                differences: {!! json_encode($differences) !!}
            }
        },

        components: {
            ek: {
                template: '#ek-template',
                props: ['diff'],

                computed: {
                    difference: function () {
                        return JSON.parse(this.diff);
                    },
                },
            },

            vlt: {
                template: '#source-template',
                props: ['diff'],
                computed: {
                    difference: function () {
                        return JSON.parse(this.diff);
                    },
                },
            }
        },
    });
</script>

И я хочу использовать цикл Vue.js вместо foreach Laravel, потому что у меня уже есть данные в объекте Vue.js. Есть ли решение как это сделать?


javascript php vue.js laravel vue-component
person Jaroslav Klimčík    schedule 23.11.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам не нужно смешивать шаблоны Blade и Vue JS.

Ваш пример правильный, вам просто нужно преобразовать его в компонент VueJs для одного файлового компонента. (файлы *.vue) Структура компонентов vue

// template should only have one root (e.g. wrap in div)
<template>
    <div id="container">
        <table border="1">
            <template v-for="row in storage.rows">
                <tr>
                    <td rowspan="2"><input type="checkbox"></td>
                    <td rowspan="2">{{row.sn}}</td>
                    <td>{{row.source}}</td>
                </tr>
                <tr>
                    <td>{{row.pair.source}}</td>
                </tr>
            </template>
        </table>
    </div>
</template>


<script>
export default {
    // a data has to be a function within a vue component
    data () {
        return {
            storage: {
                rows: [
                    {sn: 111, source: 'EK', pair: {source: 'VLT', in: 100}},
                    {sn: 222, source: 'EK', pair: {source: 'VLT', in: 200}}
                ]
            }
        }
    }
}
</script>

// styling for a template
<style>
</style>

В новом проекте laravel 5.3 предустановлен образец компонента vue. Вы можете использовать это как ссылку и использовать gulp для компиляции всех ваших компонентов vue (*.vue) в один файл (например, app.js)

person Duy Anh    schedule 23.11.2016