Question

我尝试将我的前端连接到我的后端，请求正确完成我收到了正确的数据，但DOM没有更新。我用这个。$ nextTick但它不会影响更新

在我使用{{system.CPU.avgload}}的模板中就像我说获取正确完成它传递给nexttick，但没有任何改变

在主要的vue我有这个

import System from '../utils/system'
import Auth from '../utils/auth'

export default {
  created: function () {
    this.system = {
      CPU: {
        avgload: 0
      }
    }
  },
  mounted: function () {
    this.fetchData()
    setInterval(function () {
      this.fetchData()
    }.bind(this), 10000)
  },
  methods: {
    fetchData () {
      if (!Auth.checkAuth) {
        console.log('test')
        this.error = true
      } else {
        var self = this
        this.$nextTick(function () {
          System.Get(function (response) {
            self.system = response
          })
        })
      }
    }
  }
}

，模板是

<div class="text-xs-left" id="example-caption-1">CPU : {{ system.CPU.avgload }} %</div>

Answer 1

您必须在vue实例的data部分添加变量system。只有这个变量才会在HTML中变得具有反应性和可用性。

export default {
  data: function () {
    return { system: {
                CPU: {
                    avgload : ""
                }
             }
           }
  }
  ...
  ...

vuejs nextick不更新

1 个答案: