从 API 获取数据后在 VueJS 中显示数据数组的长度答案

【问题标题】：Show length of data array in VueJS after getting the data from API从 API 获取数据后在 VueJS 中显示数据数组的长度
【发布时间】：2020-08-25 23:19:19
【问题描述】：

我正在使用 Vue JS 从 API 获取一些数据。我想通过方法获取这个数组的长度并记录到控制台。

但它总是记录“0”的值而不是实际长度。

我可以毫无问题地访问 html 中的数据并显示长度（{{ termine.length }}）。

但我想使用“logToConsole”方法。

访问数据似乎有问题（在函数调用的那一刻似乎未定义）。

我在“created”中获取数据，并在“mounted”中输出长度，所以它应该是可用的（？）。

您知道为什么即使在“created”中获取数据后，我也无法在“mounted”函数中访问数组的数据吗？

new Vue ({
    el: "#calendar",
    data: {
        termine: [],
    },
},
created() {
    fetch("https://www.myurl.com/data/?json&function=GetEvents")
        .then(response => response.json())
        .then((data) => {
            this.termine = data;
        })
},
mounted() {
    this.logToConsole();
},
methods: {
    logToConsole: function () {
        console.log(this.termine.length);
    },
},

})

【问题讨论】：

标签： javascript api vue.js

【解决方案1】：

当然，created hook 是在挂载之前触发的。但是您知道，您正在使用 API 响应设置终端属性，并且它是通过异步发生的。如果您使用 this.termine = ['a', 'b'] 这样的简单语句简单地设置 termine 属性，它将记录 2。

如果您想在使用 API 获取值后记录数据，您可以使用 watch。喜欢：

watch: {
   termine(val) {
      console.log(val)
   }
}

【讨论】：