web-dev-qa-db-fra.com

Analyse du XML à partir de la réponse Axios, poussant vers un tableau de données Vue

Dans mon application Vue, je reçois un fichier XML avec Axios et j'utilise parseString pour analyser XML au format JSON. Je dois ensuite passer la result à Vue data (this.events). Mon journal de console affiche le fichier XML analysé sous la forme Json, mais je ne peux pas utiliser les données Push to Vue dans cette fonction.

var parseString = require('xml2js').parseString;

axios.get(`http://url.to/events.xml`)
  .then(response => {
    parseString(response.data, function (err, result) {
      console.log(result); // returns a json array
      this.events = result // nothing happens
    });        
  })
}

Comment stocker mon tableau JSON dans this.data dans Vue?

xmlvue.jsaxiosxml2js
4
Filip Blaauw

Essayez de ne pas utiliser this dans parseString. C'est peut-être un problème de portée, ce qui signifie que this ne fait pas référence à l'objet de données vue. 

Essaye ça: 

axios.get('http://url.to/events.xml')
  .then(response => {
    var self = this; 
    parseString(response.data, function (err, result) {
      self.events = result
    });        
  })
}
2
samayo

La réponse ci-dessus est correcte. Cependant, je voudrais simplement utiliser les fonctions de flèche partout afin que this soit toujours le composant de classe VUE. En outre, je vérifierais les erreurs d'analyse.

axios.get('http://url.to/events.xml')
  .then(response => {
    parseString(response.data, (err, result) => {
      if(err) {
       //Do something
      } else {
       this.events = result
     }
    });        
  })
}
2
kimy82