Начал изучать vuejs.
До этого работал только с jquery, так что пока куча вопросов.
1. Как правильно подгружать данные с сервера и передать их компоненту?
var data = {
clientsTableHeader: {},
clients: []
}
Vue.component('clients-list', {
data: function() {
return data
},
template: '<div><table class="table table-bordered"><thead><tr><th v-for="tableHeader in clientsTableHeader" v-if="tableHeader.show">{{tableHeader.title}}</th></tr></thead><tbody><tr v-for="client in clients"><td>{{client.name}}</td><td>{{client.email}}</td></tr></tbody></table></div>'
})
new Vue ({
el: '#clients',
data: data,
created: function() {
this.$http.get('/personal/clients/api/clients.php').then(response => {
data.clientsTableHeader = response.body.data.clientsTableHeader;
data.clients = response.body.data.clients;
}, response => {
});
},
methods: {
}
});
Серверная часть php:
header('Content-Type: application/json');
$arData = [
'clientsTableHeader' => [
'name' => ['title' => 'ФИО', 'show' => true],
'email' => ['title' => 'Email', 'show' => true],
],
'clients' => [
[
'name' => 'Иван',
'email' => 'ivan@mail.ru',
],
[
'name' => 'Петя',
'email' => 'petya@mail.ru',
],
[
'name' => 'Вася',
'email' => 'vasya@mail.ru',
],
]
];
echo json_encode([
'data' => $arData
]);
exit();
Правильно ли использовать общий объект data для компонента в приложении? Или до объекта data компонента можно по-другому добраться?
2. В clientsTableHeader.email.show = показывать колонку или нет.
Как это можно использовать при обработке списка клиентов, чтобы не выводить email из clients если clientsTableHeader.email.show = false?
<table class="table table-bordered">
<thead>
<tr>
<th v-for="tableHeader in clientsTableHeader" v-if="tableHeader.show">{{tableHeader.title}}</th>
</tr>
</thead>
<tbody>
<tr v-for="client in clients">
<td>{{client.name}}</td>
<td>{{client.email}}</td>
</tr>
</tbody>
</table>