VUE.JS 使用axios数据请求时数据绑定时报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法

╰+攻爆jí腚メ 2023-06-15 07:26 7阅读 0赞

正常情况下在data里面都有做了定义  
![在这里插入图片描述][20191121144817316.png]

在函数里面进行赋值

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw_size_16_color_FFFFFF_t_70]

这时候你运行时会发现，数据可以请求到，但是会报错 TypeError: Cannot set property ‘listgroup’ of undefined

主要原因是：

在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。  
可以看下 Stackoverflow 的解释：

解决办法：

1、用ES6箭头函数，箭头方法可以和父方法共享变量

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw_size_16_color_FFFFFF_t_70 1]

2、在请求axios外面定义一下 var that=this

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw_size_16_color_FFFFFF_t_70 2]  
问题解决

[20191121144817316.png]: https://img-blog.csdnimg.cn/20191121144817316.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191121144839116.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191121144855905.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191121144955578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTczNDQ5Mw==,size_16,color_FFFFFF,t_70