数据更改时，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

Vue's v-bind:class 接受对象或数组而不是字符串，这可能是您的问题。

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

根据下面的 cmets 更新我的答案：

你需要使用 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/

Answer 2

如果你在js中使用font-awesome，你可以试试这个：

FontAwesomeConfig = { autoReplaceSvg: 'nest' }

文档：https://fontawesome.com/how-to-use/svg-with-js#auto-replace-svg-nest