Vue.js: v-bind: Klasse nach Axios-Anfrage

Question

Ich habe eine dynamische Liste von API-Anfrage über Axios generiert. In dieser Liste habe ich die Klasse eines Elements, die generiert werden muss, nachdem das generiert wurde.

Also hier ist, was ich habe, so weit:

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

Wie ich in der Konsole (Netzwerk-Registerkarte) sehen kann, der API-Aufruf "/ api/ARTICLE_STATUS/{article_id}" funktioniert, so den Ajax-Aufruf funktioniert. Die Rückgabeanweisung erreicht jedoch nicht v-bind: class ...

Answer 1

Wie im Kommentar beschrieben, können Sie Promise nicht von der Funktion an Ihr Element binden. Außerdem gibt es eine bessere Alternative. Sie können so etwas verwenden.

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

} 

Nun ist die einzige Sache, die Sie brauchen, um die Klasse wie folgt zu binden:

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