API 使用 vuejs 调用

Question

Code: https://pastebin.com/uyp5VM4Z

Can somebody help me, that when opening the page instead of {{stats. jobs}} {{stats. jobs}} nothing is written. The problem is also described in the image and in the codepen.

https://codepen.io/Elten1/pen/XWmeBQP

https://prnt.sc/sa9ioi

Answer 1

Your mistake is in setting the data. When creating the instance of your vue, you have to set it like this:

data : {
  status : {
  jobs : null,
  },
},

In the example you share you used:

    data() {
return {
stats : null,
}
}

Here there are two issues, this particular format where you are returning the object is used for components not for the Vue instance, the reason for that is, each component must have its own dataset and setting it like Vue instance, you cannot differentiate between the data of instances of same component.

Another problem is you have set stats to null, you instead have to set stats.jobs to null. This is because Vue needs to know the variables for the vue instance and sort of works like map for Vue. There is a way to set nested values using vue's set funtion but you will have to check the documentation on how to do that.

Reference: https://vuejs.org/v2/guide/reactivity.html

I directly set the set the data and I didn't check if the API is working. So do check if the API is returning the data.