从API获取数据后，以VueJS显示数据数组的长度

Question

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

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

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

但是我想使用方法“logToConsole”来完成。

访问数据似乎是一个问题（在函数调用的瞬间似乎是未定义的）。

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

你知道为什么我不能在我的“mounted”函数中访问数组的数据，即使在“created”中获得数据之后也是如此吗？

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);
    },
},

}）

Answer 1

当然，创建的钩子是在挂载之前触发的。但是您知道，您正在使用API响应设置termine属性，而且这是在异步中发生的。如果您使用以下简单语句简单地设置termine属性。termine=['a'，'b']，它将记录2。