Получить данные из локального файла json в методе Vuejs, используя jQuery $ .getJSON ()

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

Я не уверен, где вы хотите получить доступ к этому вне функции. Например, вы можете присвоить результат $.getJSON данным экземпляра Vue с помощью self.data = data, после чего вы сможете получить к нему доступ за пределами $.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()
  }
}