Vue 更新Data數據頁面無反應問題

問題描述

• 更新了data里的數據，頁面無同步變化

原因分析

• 原因1：存在this指向問題，沒有真正更新到data
• 原因2：Vue不能檢測對象屬性的添加或刪除
• 原因3：更新的層級太深

解決方法

• 處理原因1：存儲外部環境this指針，在異步回調函數中使用

var self = this;
$.get({
  url: '/api',
  success: function(res){
    self.list = res.data;
  }
})

• 處理原因2：可以使用Vue.set()函數

var self = this;
Vue.set(self.template, 'name', 'Kevin');

• 處理原因3：建議對象層級設計時盡量扁平化

  • 方法一：使用強制刷新

  var self = this;
  self.tempalte.hobby.games.football.color = 'blue';
  self.$forceUpdate();
  

  • 方法二：創建一個指向深層級的變量，然后直接更新該變量

  data: {
      tempalte: {
          hobby: {
              games: {
                  football:{
                      color: ''
                  }
              }
          }
      }
  },
  mounted: {
      var self = this;
      self.footballColor = self.tempalte.hobby.games.football.color;
  },
  methods: {
      setFootballColor: function(color){
          var self = this;
          self.footballColor = color;
      }
  }