Как laravel передать данные из контролера в component vue.js для spa?

Question

[Евгений Хрипунов]

Имеется api роут:

Route::namespace('Api')->group(function () {
    Route::get('/articles', 'ArticlesController@index');
});

В контроллере имеется обычная функция, которая возвращает данные статей из бд

public function index()
    {
        return Articles::orderBy('id', 'desc')->Simplepaginate(10);
    }

В обычном view: index.blade я могу вывести данные

$article->description
$article->created_at,
$article->author->name  (Тут через связь в модели можно получить автора статьи)

В компоненте vue делаю axios запрос к api и получаю обратно данные:

export default {
        data() {
            return {
                articles: null,
                error: null,
                loading:false,
            };
        },
        created() {
            this.fetchData();
        },
        methods: {
            fetchData() {
                this.error = this.users = null;
                this.loading = true;
                axios
                    .get('/api/articles')
                    .then(response => {
                        this.loading = false;
                        this.articles = response.data.data;
                    }).catch(error => {
                    this.loading = false;
                    this.error = error.response.data.message || error.message;
                });
            },
        },

Далее вот так вот например можно вывести данные самой статьи во vue

v-for="{description,created_at } in articles" ... {{ description }}

Но как получить данные автора статьи? Аналог ($article->author->name)
Вот так вот не получается articles.author.name или author.name
Заранее спасибо!

Answer 1

[0xD34F]

Далее вот так вот например можно вывести данные самой статьи во vue

v-for="{description,created_at } in articles" ... {{ description }}

А ещё, вы не поверите, можно и иначе:
v-for="a in articles" ... {{ a.description }}
Соответственно, и автор статьи будет доступен как a.author.name (если конечно, вы насчёт структуры данных не обманываете).

Ну или по аналогии с description и created_at делайте, через деструктуризацию (кстати, а кто вам такое посоветовал? - почитали бы вместо этого официальную документацию):
v-for="{ author } in articles"
В это случае author.name будет OK.

Comments

[Евгений Хрипунов]

А ещё, вы не поверите, можно и иначе:
v-for="a in articles" ... {{ a.description }}
Соответственно, и автор статьи будет доступен как a.author.name (если конечно, вы насчёт структуры данных не обманываете).

Не работает. Может немного поподробней опишу. Есть 2 таблицы Articles и Users.. В таблице articles есть поля id, author_id, description,... В таблице users есть поля id, name, email... Т.е. есть связь через внешний ключ полей author_id и id пользователя В модели Articles прописана функция, которая связывает статью с автором статьи (через внешний ключ)

public function author(){
        return $this->belongsTo('App\User','author_id')->withDefault();
    }

Т.е. таким образом можно "подтянуть" через внешний ключ автора статьи $article->author
При использовании a.author.name выдает ошибку (т.е. не подтягивает данные автора)

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

Update:
Посмотрел в отладке, что приходит вот такой объект

Object
author_id:14 //id автора статьи (внешний ключ)
category_id:50 //id категории статьи (внешний ключ)
created_at:"2018-06-13 21:18:23"
description:"Alice; 'but a grin without a moment's pause."
id:50  // id статьи

Получается вывести например id автора статьи {{ a.author_id}} или же id категории статьи. Но почему приходит только объект с внешними ключами? Как вывести имя автора?

[0xD34F]

Евгений Хрипунов,

Update:
Посмотрел в отладке, что приходит

Вот это охренеть, вовремя спохватились.

почему приходит только объект с внешними ключами?

Да мне-то откуда знать, где и как вы накосячили? - код вы не показали (впрочем, если бы и показали, вряд ли бы это сильно помогло, что там и как в laravel'е я не знаю, и знать не хочу).

Как вывести имя автора?

Ну, НАВЕРНОЕ, получив данные по автору, надо добавить их к данным статьи. Что вы сейчас, очевидно, сделать забываете.

[Евгений Хрипунов]

Спасибо, нужно немного модифицировать функцию в контроллере, указав какие дополнительные данные мы хотим передать и тогда заработает:

public function index()
    {
        return Articles::with('author:id,name')->orderBy('id', 'desc')->Simplepaginate(10);
       //или так, выбрав все поля author
       //return Articles::with('author")->orderBy('id', 'desc')->Simplepaginate(10);; 
    }