Get data from local json file in Vuejs method using jQuery $.getJSON()

问题

I'm working on a demo app using Vuejs, and as part of it, I need to get some map data from a local .json file, get certain parts of it (such as lat/long values), and then put it into the appropriate data objects so they can be displayed on a map. After doing a lot of searching it seems that the easiest way it to use jQuery's $.getJSON() method. However, what I can't figure out is how to get the data from within the $.getJSON callback to my Vue markers object.

Here's my relevant code:

<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>

As you can see by the comment above, I need to get the data from inside the $.getJSON callback, but I can't see what I need to do that. Will this way work, or is there a better way?

回答1:

I'm not sure where do you want to access this outside the function. For example, you can assign result of $.getJSON to Vue's instance data by self.data = data, then you can access it outside of your $.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()
  }
}

回答2:

I think you are looking for a way to use your data object's inside your method. You can use this to get access to your data object's :

this.markers = data;

UPDATE :

In your case, you have another scope in your method ( Your callback ) so you ned to use View Model. just before your getJSON line, define it like this :

var vm = this;

Then inside your callback, you can have access to your data object :

vm.markers = data;

notice that if you are using the older version's of vue ( below 2.x ) , you need to use it like this :

this.$data.markers = data;

来源：https://stackoverflow.com/questions/50342339/get-data-from-local-json-file-in-vuejs-method-using-jquery-getjson