Vue.js: V-bind:class After Axios Request

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: &l

Solution 1:

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:

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