在vue中显示来自rapidapi的API数据

Question

我在玩vueJS和rapidapi，我试图使用vue显示API中的数据，并使用JS Fetch方法检索API。然而，当我运行代码时，我得到的只是启动它的值(即：[](。

<template>
<div>
<div>{{ chuckData }}</div>
</div>
</template>
<script>
var chuck = [];
fetch("https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random", {
method: "GET",
headers: {
"x-rapidapi-host": "matchilling-chuck-norris-jokes-v1.p.rapidapi.com",
"x-rapidapi-key": "***"
}
})
.then(response => response.json()) // Getting the actual response data
.then(data => {
chuck = data;
})
.catch(err => {
console.log(err);
});
export default {
data() {
return {
chuckData: chuck
};
}
};
</script>

我还尝试使用以下内容：

var chuck fetch("https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random", {...}

但我得到的只是[object Promise]，没有我期望显示的数据。

我做错了什么？

Answer 1

您应该在Vue实例中定义一个方法来获取API数据。

像这样：

methods: {
getRapidApiData() {
//do the fetch.... etc
}
}

您可以去掉var chuck = [];，因为它不需要，并用this.chuckData替换chuck的引用。

然后，您可以启动类似chuckData: []的chuckData

Answer 2

最终解决方案如下所示：

<div class="col-md-3" v-for="result in chuck">
{{result}}
</div>
<script>
export default {
data() {
return {
chuck: []
};
},
mounted() {
this.getData();
},
methods: {
getData() {
fetch("https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random", {
method: "GET",
headers: {
"x-rapidapi-host": "matchilling-chuck-norris-jokes-v1.p.rapidapi.com",
"x-rapidapi-key": "<API KEY>"
}
})
.then(response => response.json())
.then(data => {
this.chuck = data;
});
}
}
};
</script>

谢谢！