Problem description

  • Updated the data in the data, the page has no synchronous change

Cause analysis,

  • Cause 1: There is a pointing problem with this and data is not really updated
  • Possible cause 2: Vue cannot detect the addition or deletion of object attributes
  • Cause 3: The update level is too deep

The solution

  • Cause 1: Store the external environment this pointer (ES5), used in asynchronous callback functions
var self = this;
$.get({
  url: '/api'.success: function(res){ self.list = res.data; }})Copy the code
  • Solution Cause 2: The vue.set () function can be used
var self = this;
Vue.set(self.template, 'name'.'Kevin');
Copy the code

  • Solution Cause 3: It is recommended that the object level be designed as flat as possible

    • Method 1: Refresh forcibly
    var self = this;
self.tempalte.hobby.games.football.color = 'blue';
self.$forceUpdate();
Copy the code
    • Method 2: Create a variable that points to the deep level and update it directly
    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;
        Vue.set(self.footballColor, 'color'.'blue'); }}Copy the code