Vue.js Not updating the class css items when data changes

Question

I am having a problem updating my shown class when the data changes.

I have a servers array that calls to get the server status every 10 seconds. If the data changes, the data changes, but the class doesn't

The part that isn't changing is showing the font-awesome icon based on the status 'fas fa-exclamation-triangle critical' : 'fas fa-check ok'">

The text does change {{server.status}} just not the font-awesome class in the if statement.

Any ideas on what I need to change to get it to show correctly?

<tr v-for="server in servers">
    <td>
      {{server.name}}
      <a v-bind:href="server.url" target="_blank">{{server.url}}</a>
    </td>
    <td style="min-width: 125px">
      <i :class="server.status === 'CRITICAL' ? 'fas fa-exclamation-triangle critical' : 'fas fa-check ok'"></i>
      {{server.status}}
    </td>
    <td>{{server.revision}}</td>
    <td>{{server.notify}}</td>
    <td>{{server.count}}</td>

  </tr>

    <script>
  import axios from 'axios'

  export default {
    name: 'ServerMonitor',
    data() {
      return {
        servers: []
      }
    },
    created() {
      this.fetchData();
    },
    mounted: function () {
      setInterval(function () {
        this.fetchData();
      }.bind(this), 10000)
    },
    methods: {
      fetchData() {
        axios.get('https://SERVER/serverinfo')
          .then((resp) => {
            this.servers = resp.data[0].servers;
          })
          .catch((err) => {
            console.log(err);
          })
      }
    }
  }
</script>

Also I have tried it without the :class like this:

<i v-if="server.status === 'CRITICAL'" class="fas fa-exclamation-triangle critical"></i>
<i v-if="server.status === 'OK'" class="fas fa-check ok"></i>

Answer 1

Vue's v-bind:class takes an object or an Array and not a string, which is probably your issue.

   <td style="min-width: 125px">
      <i :class="['fas', server.status === 'CRITICAL' ? 'fa-exclamation-triangle critical' : 'fa-check ok']"></i>
      {{server.status}}
   </td>

Updating my answer based on comments below:

You need to use the font-awesome Vue component. What's happening is that FontAwesome is converting the <i> icons to SVG once, and doesn't rerender them at any future point.

Edit 2 Alternatively you can use the v4 upgrade shim:

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/v4-shims.js"></script>

https://jsfiddle.net/6tfqp4nb/12/