Загрузите новые данные JSON и замените старый в VueJS

Question

Я использую цикл v-for с данными, извлеченными из файла JSON. Есть ли способ повторного рендеринга DOM и целых циклов v-for после загрузки нового файла JSON и замены старого? То, что я пытаюсь достичь, - это загрузка различных наборов продуктов при щелчке и обновлении DOM.

Vue.use(VueResource);  
var productsList = new Vue({ 
    el: '#vue', 
    data: function() { 
     return { 
      products: [] 
     }; 
    }, 
    ready: function() { 
     this.$http.get('data/data.json').then(function (response) { 
      this.products = response.data; 
     }); 
    }, 
    methods: { 
     loadProducts: function (url) { 
      this.$http.get(url).then(function (response) { 
       this.products = response.data; 
      }); 
     } 
    } 
}); 

Answer 1

Код, указанный выше, должен быть достаточным для автоматического обновления DOM. Однако есть 2 ошибки и 1 вещь, которую вы должны учитывать.

Анонимные функции имеют разные области применения в javascript. Это означает, что когда у вас есть анонимная функция function(response), вы теряете область действия vue instance this. Чтобы справиться с такими ситуациями, вам нужно либо использовать функции стрелок, если у вас есть поддержка для них в вашем проекте, либо сохранить this в другую переменную перед входом в анонимную функцию.

Vue.use(VueResource);  
var productsList = new Vue({ 
el: '#vue', 
data: function() { 
    return { 
     products: [] 
    }; 
}, 
ready: function() { 
    var self=this; 
    this.$http.get('data/data.json').then(function (response) { 
     self.products = response.data; 
    }); 
}, 
methods: { 
    loadProducts: function (url) { 
     var self=this; 
     this.$http.get(url).then(function (response) { 
      self.products = response.data; 
     }); 
    } 
} 
}); 

Также, если у вас есть этот точный код, вы должны были получить сообщение об ошибке в браузере с неопределенными продуктами.

Answer 2

После того, как вы обновите данные products, оно автоматически изменит DOM как номинальные данные, так как данные vue являются реактивными. Одна ошибка, которую я вижу в вашем коде, может иметь неправильный this внутри блока this.$http. вместо использования function() синтаксиса, используйте arrow function, который не связывает его собственной this, arguments, super или new.target, как следующее:

Vue.use(VueResource);  
var productsList = new Vue({ 
    el: '#vue', 
    data: function() { 
     return { 
      products: [] 
     }; 
    }, 
    ready: function() { 
     this.$http.get('data/data.json').then((response) => { 
      this.products = response.data; 
     }); 
    }, 
    methods: { 
     loadProducts: function (url) { 
      this.$http.get(url).then((response) => { 
       this.products = response.data; 
      }); 
     } 
    } 
});