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

我很难将属性添加到Laravel集合中的每个项，然后在我的Vue.js组件中显示它

控制器

公共功能索引（）
{
$tousLesBons=BonCadeau:：with（['user'，'moyendepaiment']））
->orderBy（'created_at'，'desc'）->get（）；
$changed=$tousLesBons->map（函数（$value，$key）{
$value['residualAmount']=50；
返回$value；
});
返回$changed->all（）；
}

Vue.js中的Axios（works）

显示在my Vue.js表中（与axios位置相同）

{{bonCadeau.serialNumberProduct}
{{bonCadeau.cost}
{{bonCadeau.amountOfCard}
{{boncadeau.residualAmount}}
{{bonCadeau.moyendepaiment.name}
{{bonCadeau.user.name}

如果我删除

residualAmount

属性，则我的显示部分也可以工作。我不能理解这个错误

呈现中出错：“TypeError:无法读取的属性'residualAmount' 未定义”

---

您没有拼写一个变量。不要忘记，变量是区分大小写的

这

{{boncadeau.residualAmount}}

应该是这样的：

---

{{bonCadeau.residualAmount}

您没有拼写一个变量。不要忘记，变量是区分大小写的

这

{{boncadeau.residualAmount}}

应该是这样的：

---

{{bonCadeau.residualAmount}

该错误意味着

bonCadeau

未定义。。。该值不存在。错误意味着

boncadeau

未定义。。。价值不存在

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

<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>