Javascript API数据显示在浏览器控制台中，但不显示在网页Vue.js上

我是API设计新手，我正在尝试实现一个API调用，该调用仅显示我通过CLI使用vue.js项目在线找到的API服务器中的数据。虽然我可以在浏览器的控制台中看到结果，但我无法看到我正在处理的网页上显示的实际数据。我也见过类似的问题，但在使用Vue时，这些问题似乎都与我的问题不一样。在花了几天的时间研究之后，我似乎找不到问题所在，我很确定这是我正在搞乱的一件非常基本的事情，这使得在这件事上承认失败更加令人沮丧。以下是相关代码：

<template>
  <div class="health">
    <p>{{response}}</p>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "HelloHealth",
  data() {
    return {
      response: ""
    };
  },
  mounted() {
    axios({
      method: "GET",
      url:
        "https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random",
      headers: {
        "content-type": "application/octet-stream",
        "x-rapidapi-host": "matchilling-chuck-norris-jokes-v1.p.rapidapi.com",
        "x-rapidapi-key": "5788793819msh9c9b16c2298d826p1e5fefjsn3d5bde507db6",
        accept: "application/json"
      }
    })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

以下是我在控制台中获得的代码结果：

谁能确定我做错了什么？非常感谢。

您没有设置此选项。请对其他选项进行响应。 在挂载调用中，Axios调用成功后，需要设置响应：

 .then(response => {
     this.response = response.data;
 })

Vue的文档中有一个非常好的指南，介绍如何使用API以及如何将数据集成到Vue中：

您还没有在响应数据属性中设置任何响应数据。您可以在mounted的方法中调用此API，而不是在mounted中直接调用API。这是很好的编码。确切地说，它是如何工作的：

import axios from "axios";
export default {
  data() {
    return {
      response: ""
    }
  },
  methods: {
    getResponseData() {
      axios({
        method: "GET",
        url:
          "https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random",
        headers: {
          "content-type": "application/octet-stream",
          "x-rapidapi-host": "matchilling-chuck-norris-jokes-v1.p.rapidapi.com",
          "x-rapidapi-key": "5788793819msh9c9b16c2298d826p1e5fefjsn3d5bde507db6",
          accept: "application/json"
        }
      })
        .then(response => {
          this.response = response.data;
          console.log(this.response); //get response data
        })
        .catch(error => {
          console.log(error);
        });
      }
  },

  mounted() {
    this.getResponseData();
  }
}

谢谢

.then(response => {
      this.response = response.data;
      console.log(this.response); //get response data
    })

axios返回的响应具有不同的作用域。 它在仅限then功能中可用。

---

您应该将组件的响应设置为axios返回的响应。

非常感谢Sukanta！这对我很有用，现在我对API的工作原理有了更深入的了解。这对我来说是一个巨大的帮助，我真的很感谢你这么快就回答了这个问题。谢谢你。关于API是如何实现的，我当然还有很多需要学习的地方。这个链接应该是我的一个良好的基础。