Как правильно работать с данными в vuejs?

Начал изучать 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>
  • Вопрос задан
  • 303 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
правильно ли использовать общий объект data

Нет.

Родительский компонент загружает данные и передаёт их посредством параметров в дочерние (ну или vuex используйте, если структура приложения сложнее).

В родителе:

<clients-list :rows="clients" :headers="clientsTableHeaders"></clients-list>

В дочернем компоненте:

Vue.component('clients-list', {
  props: [ 'rows', 'headers' ],
  ...
});

clientsTableHeader.email.show <...> как это можно использовать при обработке списка клиентов

Сделать вычисляемое свойство, которое будет представлять отфильтрованный массив заголовков (да, лучше сделать заголовки обычным массивом, так будет гораздо удобнее) по значению свойства show:

computed: {
  activeHeaders() {
    return this.headers.filter(n => n.show);
  },
},

При рендеринге таблицы перебирать этот массив:

<thead>
  <tr>
    <th v-for="header in activeHeaders">{{ header.title }}</th>
  </tr>
</thead>
<tbody>
  <tr v-for="row in rows">
    <td v-for="header in activeHeaders">{{ row[header.name] }}</td>
  </tr>
</tbody>

https://jsfiddle.net/jgneacxq/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы