Vue.js 当数据更改时不更新类 css 项

Question

当数据更改时，我在更新显示的类时遇到问题。

我有一个服务器数组，每 10 秒调用一次以获取服务器状态。如果数据发生变化，则数据发生变化，但类不会变化

没有改变的部分是根据状态 'fas fa-exclamation-triangle critical' : 'fas fa-check ok'"> 显示很棒的字体图标

文本确实改变了 {{server.status}}，只是没有改变 if 语句中的 font-awesome 类。

关于我需要更改什么才能使其正确显示有什么想法吗？

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

我也尝试过不使用 :class ，如下所示：

<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

Vuev-bind:class接受一个对象或数组而不是字符串，这可能是你的问题。

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

根据以下评论更新我的答案：

您需要使用 font-awesome Vue 组件。发生的情况是 FontAwesome 将<i>图标转换为 SVG 一次，并且不会在将来的任何时候重新渲染它们。

编辑 2 或者，您可以使用 v4 升级 shim：

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

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