javascript - 在 Vue 中构建 axios 回调

Question

问题

如果我只想在我的项目中显示一个笑话，我的代码中遗漏了什么或做错了什么？

WIP demo on codepen

---

示例 JSON 响应

HTML

<div class="jokes" v-for="joke in jokes">
  <h2>{{ joke.setup }}</h2>
  <p>{{ joke.line }}</p>
</div>

JS - 巴别塔

new Vue({
  el: '#app',
  data:{
    jokes: []
  },
  created(){
    this.GetJokes();  
  },
  methods: {
     GetJokes () {
      axios.get('https://08ad1pao69.execute-api.us-east-1.amazonaws.com/dev/random_joke')
      .then(response => {

          let joke = response.data[0];

          let apiInfo = {
            setup: joke.setup,
            line: joke.punchline
          };
          this.jokes.push(apiInfo)
      })
    }
  }
})

Answer 1

您的响应不是数组。你只需要

let joke = response.data

这将修复您的代码。

这是您的 pen updated .