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 () =>
更改为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 多次渲染时,表单块会混乱