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

Question

本人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。
我可能，，，这个，前端学的不太好，还请大家，，多多指教。被困扰两天了，两天啊！！！
救救孩子！

Answer 1

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

Answer 2

先把无关的error给解决了

Answer 3

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

Answer 4

vue设置对象值时应该使用$set
this.categories = result.data.body
//改为：
this.$set(this,'categories',result.data.body)

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

setTimeout

Answer 10

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