web-dev-qa-db-ja.com

Axios応答からXMLを解析し、Vueデータ配列にプッシュ

Vueアプリで、Axiosを使用してXMLファイルを取得し、parseStringを使用してXMLをJSONとして解析します。その後、resultをVueデータ（this.events）：コンソールログには、解析されたXMLがJsonとして表示されますが、Vueこの関数内のデータにプッシュできません。

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

JSON配列をVueのthis.dataに保存する方法は？

xmlvue.jsaxiosxml2js
7
Filip Blaauw

this内でparseStringを使用しないようにしてください。おそらくスコープの問題です。つまり、thisはvue=データオブジェクトを参照していません。

これを試して：

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

上記の答えは正しいです。ただし、どこでも矢印関数を使用するだけなので、thisは常にVUEクラスコンポーネントです。また、解析エラーをチェックします。

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