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

渲染错误：“TypeError：无法读取属性‘residualAmount’ 未定义”

Answer 1

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

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

应该是这样的：

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