L'objet du jeu de données à partir d'une méthode dans VUE.js

J'ai été coincé avec ce problème depuis 2 heures maintenant et vraiment, je n'arrive pas à obtenir ce travail.

JS:

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);
      });

    }
  }
});

Quand j'ai lancer la recherche et de l'appel d'API, je veux les valeurs à transmettre à des données de sorte que la structure finale ressemble à celui ci-dessous.

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

Actuellement je reçois Cannot read property '0' of undefined.

  • La valeur de this est différent dans la fonction de rappel de l'axios .then() méthode. Vous devez enregistrer la valeur de this à l'extérieur avant de l'utiliser dans le rappel de la portée.
  • Si je change ce app, c'est la façon dont ma Vue instance est définie, il jette un Cannot convert undefined or null to object erreur.
  • Double Possible de Axios ne pouvez pas définir de données
InformationsquelleAutor Svedr | 2017-07-02
  1. 7

    Problème se trouve ici: 

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

    Vous êtes à l'intérieur de la fonction de rappel du contexte et de la valeur de this n'est pas la Vue de l'objet que vous pourriez attendre d'elle. Une façon de résoudre ce problème consiste à enregistrer la valeur de this à l'avance et de les utiliser dans la fonction de callback.

    Aussi au lieu d'utiliser Vue.set(), essayez de mettre à jour les livres de l'objet directement.

    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);
      });

    }
  }
});

    Ou si vous souhaitez utiliser Vue.set() puis utilisez ceci: 

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

    Espère que cette aide.

    • Hey, merci pour votre aide, cela fait beaucoup de sens, mais je reçois toujours le Cannot convert undefined or null to object erreur.
    • Votre vue.jeu est mauvais. Je vais modifier la réponse
    • Il m'aide. Je vous remercie.
    InformationsquelleAutor abhishekkannojia
  2. 1

    oui, le problème est une question de contexte. "cette" renvoie pas à quoi vous vous attendez à ce qu'il revienne.

    1. vous pouvez utiliser

      laisser self = this;

    2. ou vous pouvez utiliser bind

      function(){this.méthode}.bind(ce);

    la deuxième méthode est la meilleure.

    Aussi sur google quelque chose comme "comment définir le contexte dans js", "appel de liaison appliquer js" - il va vous aider à comprendre ce qui ne va pas.

    InformationsquelleAutor Nikolay_R