Question

当数据发生变化时，我在更新显示的类时遇到问题。

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

没有变化的部分会根据状态显示字体真棒图标＆＃39; fas fa-exclamation-triangle critical＆＃39; ：＆＃39; fas fa-check ok＆＃39;＆＃34;＆gt;

文本确实改变了{{server.status}}而不是if语句中的font-awesome类。

我需要改变什么才能让它正确显示？

cv2.HoughLinesP

我也尝试过没有这样的类：

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

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>

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

您需要使用font-awesome 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/

Answer 2

如果您以js方式使用font-awesome，可以试试这个：

FontAwesomeConfig = { autoReplaceSvg: 'nest' }

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

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

2 个答案: