Vue.js - v-for 不渲染 api 调用响应数据

Question

我正在尝试呈现数据列表，但似乎每当页面加载时它都不想显示数据。我的 api 调用工作并获取我需要的所有内容并将其设置为我的数据对象。这里的代码： blogPosts 设置为对象数组。

<template>
<div>
    <div class="bw-blog-card" v-for="post in blogPosts" :key="post.id">
        <div class="bw-blog-card__profile"></div>
        <div class="bw-top-blog__top-card">
            <div>
            creator: {{ post.username }}
            </div>
            <div>
                {{ post.created_at }}
            </div>
            <div class="bw-blog-card__card-title">
                {{ post.title }}
            </div>
            <div>
                {{ post.description }}
            </div>
        </div>
    </div>
</div>

</template>

<script>
module.exports = {
    data: () => {
        return {
            blogPosts: []
        }
    },
    methods: {
        getBlogPosts: async () => {
            try {
                let { data } = await axios.get(`/devblog`)
                this.blogPosts = data.data
                console.log(this.blogPosts)
            }
            catch (error) {
                console.error(error)
            }
        }
    },
    created() {
        this.getBlogPosts();
    }
}
</script>

现在，如果我将blogPosts 硬编码为对象数组，这将完全正常。我可以了解为什么它不能通过 api 调用工作吗？

Answer 1

尝试将getBlogPosts: async () => { 更改为async getBlogPosts() {，它应该可以工作：

Vue.config.devtools = false;
Vue.config.productionTip = false;

let app = new Vue({

  el: '#app',

  data() {
    return {
      blogPosts: []
    }
  },
  methods: {
    async getBlogPosts() {
      try {
        let {
          data
        } = await axios.get(`https://jsonplaceholder.typicode.com/posts`)
        this.blogPosts = data
        console.log(this.blogPosts)
      } catch (error) {
        console.error(error)
      }
    }
  },
  created() {
    this.getBlogPosts();
  }

})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <div class="bw-blog-card" v-for="post in blogPosts" :key="post.id">
    <div class="bw-blog-card__profile"></div>
    <div class="bw-top-blog__top-card">
      <div>
        creator: {{ post.userId }}
      </div>

      <div class="bw-blog-card__card-title">
        {{ post.title }}
      </div>
      <hr/>
    </div>
  </div>
</div>