时间戳

首页 > 解决方案 > 使用 jQuery $.getJSON() 从 Vuejs 方法中的本地 json 文件获取数据

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

问题描述

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

这是我的相关代码：

<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回调内部获取数据，但我看不到我需要做什么。这种方法行得通，还是有更好的方法？

标签： javascriptjqueryjsonvuejs2vue-component

解决方案

我不确定你想在函数之外的哪里访问它。例如，您可以通过 将结果分配$.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()
  }
}

推荐阅读