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

问题在于：

password does not match

您位于回调上下文中，Vue.set(this.books[i], 'title', item.title);的值不是Vue对象，正如您所期望的那样。解决此问题的一种方法是事先保存this的值并在回调函数中使用它。

此外，请尝试直接更新图书对象，而不是使用this。

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()

希望这有帮助。

Answer 2

是的，问题在于背景。＆＃34;这＆＃34;不会返回您期望它返回的内容。

你可以使用

让self = this;
或者您可以使用bind

功能（）{} this.method .bind（本）;

第二种方法更好。

同样谷歌类似于＆＃34;如何在js＆＃34;中定义上下文，＆＃34; bind call apply js＆＃34; - 它可以帮助你理解出了什么问题。

Answer 3

// update component's data with some object's fields
// bad idea, use at your own risk

Object
  .keys(patch)
  .forEach(key => this.$data[key] = patch[key])

在VUE.js中的方法中设置数据中的对象

3 个答案: