Vue.js:axios请求后的v-bind:class [英] Vue.js: v-bind:class after axios request
问题描述
我有一个通过axios的api请求生成的动态列表.在此列表中,我有一个元素的类,该元素的类必须在生成后生成.
I have a dynamic list generated by api request via axios. In this list, I have an element's class that has to be generated after the is generated.
这就是我到目前为止所拥有的:
So here's what I have so far:
<template>
<div>
<div v-if="article_count > 0" class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>state</th>
<th>created at</th>
<th>headline</th>
</tr>
</thead>
<tbody>
<tr v-for="article in articles">
<td class="status">
<!-- the class of this element should change -->
<i class="fa fa-cog fa-spin fa-fw" v-bind:class="getArticleStatus(article.id)"></i>
</td>
<td>{{ article.created_at }}</td>
<td><strong>{{ article.headline }}</strong></td>
</tr>
</tbody>
</table>
</div>
<div v-else class="text-center">no articles found</div>
</div>
</template>
<script>
export default {
data() {
return {
article_count: 0,
articles: []
}
},
methods: {
// get the articles
getArticles() {
axios.get('/api/get_articles' )
.then((response) => {
this.article_count = response.data.article_count;
this.articles = response.data.articles;
})
},
// get the article's state
getArticleStatus(article_id) {
axios.get('/api/article_status/' + article_id)
.then((response) => {
switch(response.data) {
case 'ONL':
console.log('online'); // this works
return 'status online'; // this does not work...
case 'WAIT':
return 'status waiting';
case 'OFFL':
return 'status offline';
default:
return 'status unknown';
}
}).catch((error) => {
console.error(error);
})
}
},
mounted() {
this.getArticles()
}
}
</script>
正如我在控制台(网络"选项卡)中看到的那样,对"/api/article_status/{article_id}"的api调用有效,因此ajax调用有效.但是return语句没有到达v-bind:class ...
As I can see in console (network tab), the api call to "/api/article_status/{article_id}" works, so the ajax call works. But the return statement does not reach v-bind:class...
推荐答案
如注释中所述,您不能将Promise从函数绑定到元素.而且,还有更好的选择.您可以使用类似这样的东西.
As described in the comment, you can not bind Promise from the function to your element. What's more, there is a better alternative. You can use something like this.
methods: {
getArticles () {
axios.get(
'/api/get_articles'
).then(
response => {
this.article_count = response.data.article_count
this.articles = response.data.articles
}
)
},
getArticleState (id) {
axios.get(
'/api/article_status' + id,
).then(
response => {
this.articles.forEach(function (article) {
if(article.id === id){
switch(response.data) {
case 'ONL':
article.class = 'status waiting'
}
}
})
}
)
}
}
现在,您唯一需要的就是绑定这样的类:
Now the only thing you need is bind the class like this:
<tr v-for="article in articles">
<i class='fa fa-cog' :class='article.class'>
</tr>
这篇关于Vue.js:axios请求后的v-bind:class的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!