Данные API отображаются в консоли браузера, но не отображаются на веб-странице - Vue. js

Question

Я новичок в разработке API и пытаюсь реализовать вызов API, который просто отображает данные с сервера API, который я нашел в сети, используя проект vue. js через CLI. Хотя я могу видеть результаты в консоли браузера, я не могу видеть фактическое отображение данных на веб-странице, над которой я работаю. Я видел подобные вопросы, подобные моему, но, похоже, ни у одного из них не было таких же проблем, как у меня, при использовании 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();
  }
}

Спасибо.

Answer 2

Вы не устанавливаете this.response на что-либо кроме "". В вашем вызове mounted() после успешного вызова Ax ios необходимо установить ответ: документы

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

Vue содержат довольно хорошее руководство по использованию API и интеграции данных в Vue здесь: https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

Answer 3

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

Ответ, который возвращает ax ios, имеет различную область видимости. Это доступно только тогда функции. Вы должны установить ответ компонента как ответ, возвращаемый ax ios.