объекта Vue2 не выставиться

Question

Я пытаюсь получить список данных с сервера и показать его, но выглядит как Vue не видят новые данных (не делает их реактивными)

 Vue.component('Videos', { 
      template: 
       ` 
       <div> 
        <div v-for="video in videos" v-text="video.name"> 
        </div> 
       <div> 
      `, 
      data() { 
       return { 
        videos: {}, 
       } 
      }, 
      methods: { 
       getVideos() { 
        axios.get('/admin/videos?token='+localStorage.getItem('auth_token')) 
         .then(function(response) { 
          this.videos = response.data.videos; 
         }).catch(function(errors){ 
          this.error = errors.data; 
        }) 
       }, 
      }, 
      created: function() { 
       this.getVideos(); 
      } 

     }); 

    new Vue({ 
     el: "#app", 
}); 

Также я стараюсь использовать

Object.keys(response.data.videos).forEach( key => this.$set(this.videos, key, response.data.videos[key]) );

и this.videos = Object.assign({}, this.videos, response.data.videos)

, но это все еще не работает для меня. Спасибо за помощь!

Answer 1

Вы теряете контекст как в обратных вызовах then, так и в catch. В результате вы устанавливаете window.videos переменную (глобальную) вместо экземпляра компонента videos (то же самое с error).

Простое исправление заключается в использовании arrow functions, сохраняющие лексического связывание:

methods: { 
    getVideos() { 
     axios.get('/admin/videos?token='+localStorage.getItem('auth_token')) 
      .then(response => { 
       this.videos = response.data.videos; 
      }).catch(errors => { 
       this.error = errors.data; 
     }) 
    }, 
},