vue调用后端方法成功获取数据，但页面上拿不到

[炖冻豆腐]

本人java后端，在写一个电商网站，vue+springBoot，现在被一个问题困扰了两天了。
具体问题如下：

如图，我用vue调用后端获取商品分类的接口，




接口调用成功，获取数据也是成功的，我在控制台里可以看到console.log()出来的result。

但是，页面里去展示这个{{ categories }}时，显示categories.length为0。


额，右边儿控制台大片的报错和警告还请大家暂时忽略，那个是页面里之前写死的category数据被我换成了后端调出来的数据，而原来的属性没有换，导致页面调用了不存在的属性导致的。

然后，更让我觉得困惑的是，我在mounted里面在调用getCategories()之前连续输出了this和this.categories，this里的categories在调用函数之前就可以看到有值了。如果这都暂时放在一边不去理会，我们看下面这张图，我们可以看到，第一次输出this的时候，this的categories属性里是有一个长度为6的list的，但是，如果输出this.categories的话，就显示输出的list是空，长度为0。


我可能，，，这个，前端学的不太好，还请大家，，多多指教。被困扰两天了，两天啊！！！
救救孩子！

[mtgr]

vue监控数组变化是需要push等数组方法，直接赋值监控不到的。你可以尝试a.push(...b)这样

[naturalmaster]

先把无关的error给解决了

[NGDTY]

因为你data(){}里categories是个空数组，第一次还没获取到后端数据时就显示了空数组长度。

[scscms太阳光]

vue设置对象值时应该使用$set

this.categories = result.data.body
//改为：
this.$set(this,'categories',result.data.body)

[捻墨楼南]

截图比较混乱,但是建议一下,是否考虑一下,在created中进行数据的获取呢?比如你调用接口获取数据的方法是getlist,可以在created中调用一下这个方法

[前端老混子]

因为你打印的时候，接口还没有获取到数据

[lllomh]

Hello, this problem is easy for beginners to encounter, the reason is that the hook life cycle related problems, the package you requested is not in line with the matter. Suggest trying other life cycles or synchronous asynchronization with ES6. if you something else,email me please.email address in my home page bless you

[luj_1768]

可能涉及商业保密事项，被系统阻止显示。需要滤去一些标记字符，比如tag 什么的，或者干脆翻译成中文再显示。

[杏子姐_1024]

有两种情况，一，是楼上所说的获取的时候可能是初始值，所以是空数组。二，有可能有延时，给个200毫秒定时器试试。我正好前两天也遇到过，点开属性的时候有值，但是直接用属性就是初始值。解决办法就是给个setTimeout试试。

[weixin_45568165]

setTimeout

[woshidaniubi123]

数组和对象不支持双向绑定，需要使用$set，楼上有个小婴儿已经发出答案了

[duanshuiLu点抗母]

[sha虫剂]

建议你看一下vue的生命周期，你用的mouted，这个生命周期钩子表示dom树已经加载完成了，你那个length已经调用过一次，然而这时候你还没有情求数据，所以最简单干脆的是在created里面去调用方法，或者你在渲染的时候加个判断，就是有值的时候渲染，没有值的时候就先不渲染它

[狗蛋丶]

试试这个; const that = this; 你的axios方法. then(res=>{ that.xxx = res.data }).catch(error=>{ }) lambda 表达式这种写法，response=>{},方法里this的定义被改变了？好像是这样。

[前端开发小能手]

你这个很正常呀，你是先输出的长度，然后才给它赋值，所以输出的长度是0。 至于为什么输出的this中有这个list，那是因为控制台输出对象时，输出的是对象的引用地址。 当你展开输出的对象时，它会在你点击的时候去这个地址里取值，而这里你的那个请求赋值已经执行完了，所以这里才有的数据。

[ymzhaoUSTB]

去看看JS数据类型吧。JS引用数据类型，你的categories定义后，它指向的位置没变，等你去慢慢展开打印的this，它指向的内容早就被改变了。你的http请求延迟上10秒去执行，你再看看this。 当你打印categories.length时，它就是当时的数组长度。在数组为空时，去获取它的元素的属性，就会报错。

var arr= [];
console.log(arr);
setTimeout(function(){
    arr.push({val: 1}, {val: 2});
},300)

打印出来的确实是空数组，但展开后却不是

[淘人居士]

出错的代码影响渲染，鉴定完毕

[面向百度编程cv]

放在created(){}试试

[E次奥]

在then里边不能用this.categories;

用vue实例化对象的名字去找categories；

[oolinyu]

你这有两个问题，一个是FOR list 最好不要用函数来返回, undefine 这个是显示问题，渲染前没拿到数据，有两种方法，this.$nextTick 里拿数据，或categories&&categories.length 这样就没问题了