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

我不确定你想在函数外面访问它的位置。例如，您可以$.getJSON将结果self.data = data分配给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()
  }
}

Answer 2

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

this.markers = data;

更新：

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

var vm = this;

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

vm.markers = data;

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

this.$data.markers = data;

使用jQuery $ .getJSON（）

2 个答案: