Javascript Vue.js:v-bind:axios请求后的类

我有一个api请求通过axios生成的动态列表。在这个列表中，我有一个元素的类，它必须在生成后生成

以下是我到目前为止的情况：

<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>

状态
创建于
大字标题
{{article.created_at}}
{{article.headline}}
没有找到任何物品
导出默认值{
数据（）{
返回{
物品数量：0，
条款：[]
}
},
方法：{
//拿到文章
getArticles（）{
axios.get（'/api/get_articles'））
。然后（（响应）=>{
this.article\u count=response.data.article\u count；
this.articles=response.data.articles；
})
},
//获取文章的状态
getArticleStatus（文章id）{
获取（'/api/article\u status/'+article\u id）
。然后（（响应）=>{
开关（响应数据）{
案例“仅限”：
console.log（'online'）；//这很有效
返回“联机状态”；//这不起作用。。。
“等待”案例：
返回“等待状态”；
案件“OFFL”：
返回“离线状态”；
违约：
返回“状态未知”；
}
}).catch（（错误）=>{
控制台错误（error）；
})
}
},
安装的（）{
这是getArticles（）
}
}

---

正如我在控制台（网络选项卡）中看到的，对“/api/article_status/{article_id}”的api调用可以工作，所以ajax调用可以工作。但是return语句没有到达v-bind:class…

正如注释中所述，您不能将Promise从函数绑定到元素。此外，还有更好的选择。你可以用这样的东西

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'
            }
          }
        })
      }
    )
  }

}

现在，您只需要像这样绑定类：

 <tr v-for="article in articles">
    <i class='fa fa-cog' :class='article.class'> 
 </tr>

如果在v-for循环中回显

{{getArticleStatus（article.id）}

会怎么样？而且，这是获得状态的一种非常糟糕的方式。您基本上是在v-for循环中向服务器发出请求。

axios

请求返回承诺，而不是

然后

回调的返回值。您应该考虑使用<代码>异步代码>代码>函数，或者保存返回的值在文章中object@samayo这里的问题是，对文章状态的请求大约需要一秒钟（第三方，我无法改进这一点），当我有超过50篇文章时，用户可能会感到疲劳。这就是为什么我在呈现列表后检查状态。实际上，您甚至不需要foreach，您可以使用

findIndex

找到确切的文章并将类注入其中