VUE.jsのメソッドからデータ内のオブジェクトを設定する

Question

私はこの問題を2時間抱えていましたが、実際には動作しないようです。

const app = new Vue({ 
 
    el: '#book-search', 
 
    data: { 
 
    searchInput: 'a', 
 
    books: {}, 
 
    }, 
 
    methods: { 
 
    foo: function() { 
 
     axios.get('https://www.googleapis.com/books/v1/volumes', { 
 
     params: { 
 
      q: this.searchInput 
 
     } 
 
     }) 
 
     .then(function (response) { 
 
     var items = response.data.items 
 
     for (i = 0; i < items.length; i++) { 
 

 
      var item = items[i].volumeInfo; 
 

 
      Vue.set(this.books[i], 'title', item.title); 
 

 
     } 
 
     }) 
 
     .catch(function (error) { 
 
     console.log(error); 
 
     }); 
 

 
    } 
 
    } 
 
});

私が検索し、私は最終的な構造は、以下のものに似ていますので、値がデータに渡されたいAPI呼び出しを開始するとき。

data: { 
    searchInput: '', 
    books: { 
    "0": { 
     title: "Book 1" 
    }, 
    "1": { 
     title: "Book 2" 
    } 
}, 

現在、私はCannot read property '0' of undefinedを取得しています。

Answer 1

問題はここにある：

Vue.set(this.books[i], 'title', item.title); 

あなたはコールバック・コンテキスト内であり、あなたはそれがあることを期待するかもしれないようthisの値はVueの対象ではありません。これを解決する1つの方法は、事前にthisの値を保存し、コールバック関数で使用することです。

Vue.set()を使用する代わりに、booksオブジェクトを直接更新してみてください。あなたがVue.set()を使用したい場合は

const app = new Vue({ 
    el: '#book-search', 
    data: { 
    searchInput: 'a', 
    books: {}, 
    }, 
    methods: { 
    foo: function() { 
     var self = this; 
     //--^^^^^^^^^^^^ Save this 
     axios.get('https://www.googleapis.com/books/v1/volumes', { 
     params: { 
      q: self.searchInput 
      //-^^^^--- use self instead of this 
     } 
     }) 
     .then(function (response) { 
     var items = response.data.items 
     var books = {}; 
     for (i = 0; i < items.length; i++) { 

      var item = items[i].volumeInfo; 
      books[i] = { 'title' : item.title }; 
     } 
     self.books = books; 
     }) 
     .catch(function (error) { 
     console.log(error); 
     }); 

    } 
    } 
}); 

それともこれを使用します。このことができます

Vue.set(self.books, i, { 
    'title': item.title 
}); 

希望を。

Answer 2

はい、問題は文脈です。 「これ」はあなたが返すと期待していないものを返します。

1. あなたは

   自己を聞かせ=これを使用することができます。

2. か、バインド

   関数（）{} this.method .bind（本）を使用できます。

2番目の方法が優れています。

「jsでコンテキストを定義する方法」、「bind call apply js」のようなgoogleも、何がうまくいかないのか理解するのに役立ちます。