JavaScript — 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 вместо Laravel’s foreach потому что у меня уже есть данные в объекте Vue.js. Есть ли решение, как это сделать?
Решение
Вам не нужно смешивать шаблоны 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)
Другие решения
Других решений пока нет …