javascript - API数据显示在浏览器的控制台中，而不显示在网页上-Vue.js

Question

我是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>

这是我在控制台中获得的代码结果:



谁能识别我在做什么错？非常感谢你。

Answer 1

您尚未在response数据属性中设置任何response数据。您可以在API的方法中调用此mounted()，而不是直接在API中调用mounted()。这是很好的编码。确切地说，它是如何工作的:

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

谢谢。