使用 jQuery $.getJSON() 从 Vuejs 方法中的本地 json 文件获取数据

Question

我正在使用 Vuejs 开发一个演示应用程序，作为其中的一部分，我需要从本地 .json 文件中获取一些地图数据，获取其中的某些部分（例如 lat/long 值），然后将其放入适当的数据对象中，以便它们可以显示在地图上。经过大量搜索后，它似乎是使用 jQuery 的 $.getJSON() 方法的最简单方法。但是，我不知道如何从 $.getJSON 回调中获取数据到我的 Vue markers 对象。

这是我的相关代码：

<script>
import _ from 'lodash'
import $ from 'jquery'

export default {
  name: 'HelloWorld',
  data () {
    return {
      center: {lat: 37.541885, lng: -77.440624},
      markers: []
    }
  },
  methods: {
    getMarkers: function () {
      var apparatus = {}
      var address = []
      var description = {}
      $.getJSON('../static/event1.json', function (data) {
        // What do I do here to get outside of this function so
        // I can manipulate it?
        apparatus = data.apparatus
        address = data.address
        description = data.description
      })
    }
  },
  created () {
    this.getMarkers()
  }
}
</script>

正如您在上面的评论中看到的那样，我需要从$.getJSON 回调中获取数据，但我看不出我需要做什么。这种方法行得通，还是有更好的方法？

Answer 1

我认为您正在寻找一种在方法中使用数据对象的方法。您可以使用this 来访问您的数据对象的：

this.markers = data;

更新：

在您的情况下，您的方法中有另一个范围（您的回调），因此您需要使用 View Model。在你的 getJSON 行之前，像这样定义它：

var vm = this;

然后在你的回调中，你可以访问你的数据对象：

vm.markers = data;

注意，如果你使用的是旧版本的 vue（低于 2.x），你需要像这样使用它：

this.$data.markers = data;

Answer 2

我不确定你想在函数之外的哪里访问它。 例如，您可以通过self.data = data 将$.getJSON 的结果分配给Vue 的实例数据，然后您可以在$.getJSON 之外访问它

export default {
  name: 'HelloWorld',
  data () {
    return {
      center: {lat: 37.541885, lng: -77.440624},
      markers: [],
      data: null
    }
  },
  methods: {
    getMarkers: function () {
      var apparatus = {}
      var address = []
      var description = {}
      var self = this
      $.getJSON('../static/event1.json', function (data) {
        self.data = data // then you can access data outside of your function by reference this.data


        // What do I do here to get outside of this function so
        // I can manipulate it?

        apparatus = data.apparatus
        address = data.address
        description = data.description
      })
    }
  },
  created () {
    this.getMarkers()
  }
}