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

Posted

技术标签:

【中文标题】Vue.js - v-for 不渲染 api 调用响应数据【英文标题】:Vue.js - v-for not rendering api call response data 【发布时间】:2020-12-01 11:53:28 【问题描述】:

我正在尝试呈现数据列表,但似乎每当页面加载时它都不想显示数据。我的 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 调用工作吗?

【问题讨论】:

console.log(this.blogPosts) 显示了什么? 这显示 blogPosts 设置为对象数组 我看不出它有什么不工作的原因。你能发布对象数组吗? 【参考方案1】:

尝试将getBlogPosts: async () =&gt; 更改为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>

【讨论】:

谢谢先生。现在更有意义了

以上是关于Vue.js - v-for 不渲染 api 调用响应数据的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js列表渲染 v-for

Vue.js - 如何按特定属性对数组中的对象进行排序并使用“v-for”进行渲染

在 Vue.js 中使用 v-for 多次渲染时,表单块会混乱

Vue.js 列表渲染

如何在 Vue.js 的嵌套 v-for 循环中使用 v-html 有条件地渲染原始 HTML?

vue之v-for