Question

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

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

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

但是我想使用方法“ logToConsole”来实现。

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

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

您是否知道为什么即使在“创建”函数中获取了数据后，也无法在“安装”函数中访问数组的数据？

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属性，而异步发生了这种情况。如果您使用诸如this.termine = ['a'，'b']这样的简单语句来简单地设置termine属性，它将记录2。

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

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

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

1 个答案: