Laravel 在集合中添加属性并在 Vue.js 中显示

Question

我无法将属性添加到 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();
}

Vue.js 中的 Axios（有效）

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

显示在我的Vue.jstable（和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 属性，我的显示部分也可以工作。我无法理解这个错误。

Error in render: "TypeError: Cannot read property 'residualAmount' of undefined"

Answer 1

你拼错了一个变量。不要忘记，变量区分大小写。

这个<td>{{boncadeau.residualAmount}}</td>

应该是这样的：

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

Laravel 在集合中添加属性并在 Vue.js 中显示

Laravel add attribute in collection and display it in Vue.js

laravel

eloquent

vue.js

laravel-collection