Laravel добавить атрибут в коллекцию и отобразить его в Vue.js - PullRequest
0 голосов
/ 30 апреля 2019

У меня проблемы с добавлением свойства к каждому элементу в коллекции Laravel и последующим отображением его в моем компоненте Vue.js.

Контроллер

public function index()
{
    $tousLesBons = BonCadeau::with(['user', 'moyendepaiement'])
        ->orderBy('created_at', 'desc')->get();

    $changed = $tousLesBons->map(function ($value, $key) {
        $value['residualAmount'] = 50;
        return $value;
    });

    return $changed->all();
}

Axiosв Vue.js (работает)

fetchBonsCadeaux()
        {
            axios.get('/bonCadeaus')
            .then((res) => { 
                this.bonCadeaux = res.data
            })
            .catch((err) => {
                console.log(err);
            })
        },

Отображение в моей таблице Vue.js (то же место, что и axios)

<tr v-for="bonCadeau in bonCadeaux" :key="bonCadeau.id">
      <td>{{bonCadeau.serialNumberProduct}}</td>
      <td>{{bonCadeau.cost}}</td>
      <td>{{bonCadeau.amountOfCard}}</td>
      <td>{{boncadeau.residualAmount}}</td>
      <td>{{bonCadeau.moyendepaiement.name}}</td>
      <td>{{bonCadeau.user.name}}</td>
</tr>

Отображение части моей работы также, если я удаляю residualAmount собственность.Я не могу разобраться с этой ошибкой.

Ошибка при рендеринге: "Ошибка типа: невозможно прочитать свойство 'residualAmount' из неопределенного"

1 Ответ

2 голосов
/ 30 апреля 2019

Вы пропустили написанную переменную.Не забывайте, что переменные чувствительны к регистру.

Это <td>{{boncadeau.residualAmount}}</td>

должно быть таким:

<td>{{bonCadeau.residualAmount}}</td>

...