Нет ответа или ошибки при получении данных с Vue.js с использованием API

Question

Я только начал изучать vue.js и мне нужна помощь. Я пытаюсь получить ответы из внешнего источника, используя API, когда набирается вопрос. Но я не получаю ни ответа, ни ошибки в консоли. Я уверен, что ошибка может быть.

Это ссылка на мой код https://codesandbox.io/embed/vue-template-dk71y

Answer 1

Вы почти там :), вам просто нужно исправить некоторые проблемы в вашем коде.

1. Поскольку все происходит внутри вашего Hello World компонента, нет необходимости пытаться использовать реквизиты для передачи question & answer там. Просто поместите всю свою логику в компонент.

2. Свяжите question с input с помощью директивы v-model (двустороннее связывание), например: <input v-model="question">

3. Вы должны вызывать this.getAnswer () внутри watcher

4. , а data должна быть функцией

data() {
  return {
   question: "",
   answer: "I cannot give you an answer until you ask a question!"
  }
},

Проверьте эти коды и поля

Итак, ваш компонент Hellow World должен выглядеть примерно так:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
   <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data: () => ({
    question: "",
    answer: "I cannot give you an answer until you ask a question!"
  }),

  watch: {
    // whenever question changes, this function will run
    question: function(newQuestion, oldQuestion) {
      console.log(this.question);
      this.answer = "Waiting for you to stop typing...";
      this.getAnswer()
    }
  },

  methods: {
    getAnswer: function() {
      if (this.question.indexOf("?") === -1) {
        this.answer = "Questions usually contain a question mark";
        return;
      }
      this.answer = "Thinking...";
      let vm = this;
      axios
        .get(`https://yesno.wtf/api`)
        .then(function(response) {
          vm.answer = response.data;
        })
        .catch(function(error) {
          vm.answer = `Error connecting to the API ${error}`;
        });
    }
  },
}
</script>

И ваш main.js может быть таким простым:

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  render: h => h(App)
}).$mount("#app");