Как вывести массив в Vuejs полученый от Laravel?

Question

[Влад Володько]

Здравствуйте. Начал использовать VueJs&Laravel для проекта и возник такой вопрос. Как вывести данные которые я получаю из связанной таблицы в Laravel?
Ларавел функция которая возвращает данные:

public function getTransactionList(){
        $transactions = Transaction::where('user_id', Auth::id())->get();
        $transactions->load('recipient');

        $array = [
            'transactions' => $transactions
        ];

        return $array;        
    }  

// Model
    public function recipient(){
        return $this->hasOne('App\User', 'id', 'recipient_id');
    }

Получаю

Есть vuejs компонент, который является родительским и он передает в дочерний

<template>
<div class="ui relaxed divided transactions">
    <transaction-item :transactions="transactions"></transaction-item>
</div>
</template>

<script>
 
    import axios from 'axios'
    import Item from './part/Item'

    export default {
    	data() {
            return {
                transactions: [],
            }
    	},
    	components: {
            'transaction-item' : Item,
    	},

    	created() {
    		axios.post('/transaction/getTransactionList')
                    .then(response => {
                    this.transactions = response.data.transactions;

                    })
                    .catch(error => {
                        console.log(error)
                    });
    	}
    }
</script>

Когда я в transaction-item пишу

<div>
	<div class="item" v-for="item in transactions">
{{ item.recipient.login }}
	</div>
</div>

В консоли ошибка что TypeError: item.recipient is null

Хотя в других компонента я делал нечто подобное и было все норм

Answer 1

[Александр Аксентьев]

Можно сделать и посмотреть что там не так.
{{ item.recipient }}
или
{{ item }}

Comments

[Влад Володько]

Содержимое {{ item.recipient }}

{ "id": 1, "firstname": "Name", "lastname": "Lastname", "login": "User1", "avatar": "avatar.jpg", "email": "[e-mail]", "created_at": "2018-02-06 15:08:16", "updated_at": "2018-02-06 15:08:16" }

Answer 2

[Orfen]

Попробуй $transactions не складывать в $array.
И там где передаешь :transactions, добавь для этого пропса sync (т.е :transactions.sync=transactions)

И да, в transaction-item, укажи в модуле:

// Item.js
export default{
    props:{
         transactions:{
               type: Array,
               default: []
         }
    }
}

//Item.vue

<template>
<div>
  <div class="item" v-for="item in transactions">
{{ item.recipient.login }}
  </div>
</div>
</template>
<script src="./Item.js"></script>

Как-то так должно выглядеть