Javascript 使用jQuery$.getJSON（）从VueJSON方法中的本地json文件获取数据

我正在使用Vuejs开发一个演示应用程序，作为其中的一部分，我需要从本地.json文件中获取一些地图数据，获取其中的某些部分（如lat/long值），然后将其放入适当的数据对象中，以便它们可以显示在地图上。在进行了大量搜索之后，似乎最简单的方法是使用jQuery的

$.getJSON（）

方法。但是，我不知道如何从

$.getJSON

回调中获取数据到我的Vue

标记

对象

这是我的相关代码：

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

从“lodash”导入
从“jquery”导入$
导出默认值{
名称：“HelloWorld”，
数据（）{
返回{
中心：{lat:37.541885，lng:-77.440624}，
标记：[]
}
},
方法：{
getMarkers:函数（）{
var装置={}
变量地址=[]
变量说明={}
$.getJSON（'../static/event1.json'，函数（数据）{
//我在这里做什么才能脱离这个函数呢
//我能操纵它吗？
仪器
地址=数据。地址
description=data.description
})
}
},
创建（）{
这个
}
}

---

从上面的注释可以看出，我需要从

$.getJSON

回调中获取数据，但我看不出需要做什么。这种方法有效吗？还是有更好的方法？

我不确定您想在函数之外的什么地方访问它。 例如，您可以通过

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()
  }
}

---

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

此

访问数据对象的：

this.markers = data;

更新：

在您的例子中，您的方法中有另一个作用域（回调），所以您需要使用视图模型。在getJSON行之前，按如下方式定义它：

var vm = this;

this.$data.markers = data;

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

vm.markers = data;

请注意，如果您使用的是较旧版本的vue（低于2.x），则需要如下使用：

var vm = this;

this.$data.markers = data;

---

当我查看$.getJSON回调中的

时，它是jQuery对象，而不是Vue组件。因此，在方法（回调）中有一个作用域，然后需要使用视图模型。在获取JSON之前，定义var vm=this；并在回调中使用它。我会更新答案是的，这是可行的，但是发生的事情是，在$.getJSON（）调用之后的任何事情都会在$.getJSON回调之前运行，因为它是异步的。如何仅在运行getJSON回调后运行操纵self.data的代码？