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>

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

您需要使用超棒的字体 Vue 组件。发生的事情是 FontAwesome 正在转换 <i>一次将图标添加到 SVG，并且不会在以后的任何时候重新呈现它们。

编辑 2或者，您可以使用 v4 升级垫片:

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

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