【问题标题】:Parse XML from Axios response, pushing to Vue data array从 Axios 响应中解析 XML,推送到 Vue 数据数组
【发布时间】:2018-07-25 02:02:31
【问题描述】:

在我的 Vue 应用程序中,我使用 Axios 获得了一个 XML 文件,并使用 parseString 将 XML 解析为 JSON。然后我需要将 result 传递给 Vue 数据 (this.events)。我的console.log 将解析后的 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
    });        
  })
}

如何在 Vue 中将我的 JSON 数组存储到 this.data

【问题讨论】:

    标签: xml vue.js axios xml2js


    【解决方案1】:

    This answer 是正确的。但是,我会在任何地方都使用箭头函数,所以this 始终是 VUE 类组件。另外,我会检查解析错误。

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

    【讨论】:

      【解决方案2】:

      尽量不要在parseString 中使用this,可能是范围问题,这意味着this 不是指vue 数据对象。

      试试这个:

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

      【讨论】:

      • 这有帮助,我现在可以传递数据了。谢谢!
      • 您可以使用 ES6 箭头函数来维护执行上下文并仍然使用它:)
      猜你喜欢
      • 2019-08-18
      • 2018-11-17
      • 1970-01-01
      • 2013-08-23
      • 1970-01-01
      • 2021-10-13
      • 2019-06-19
      • 2021-06-08
      • 2018-03-22
      相关资源
      最近更新 更多