Vue.js：v-bind：Axiosリクエスト後のクラス

Question

私はAxiを通じてAPI要求によって生成された動的リストを持っています。このリストでは、要素が生成された後に生成される要素のクラスがあります。

だからここに私がこれまで持っているものです。

<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コールは "/ API/article_status/{のarticle_id}" 作品なので、AJAX呼び出しに働くしかし、return文はv-bindには届きません：class ...

Answer 1

コメントに記載されているように、関数から要素へPromiseをバインドすることはできません。さらに、もっと良い選択肢があります。このようなものを使うことができます。

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