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

Posted 2023-02-23

【中文标题】使用 jQuery $.getJSON() 从 Vuejs 方法中的本地 json 文件获取数据

【英文标题】：Get data from local json file in Vuejs method using jQuery $.getJSON()

【发布时间】：2018-10-24 19:45:37

【问题描述】：

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

【参考方案1】：

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

this.markers = data;

更新：

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

var vm = this;

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

vm.markers = data;

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

this.$data.markers = data;

【讨论】：

当我查看 $.getJSON 回调中的 this 时，它是 jQuery 对象，而不是 Vue 组件。

所以你的方法（你的回调）中有一个范围，那么你需要使用视图模型。在你的 getJSON 之前，定义 var vm = this;并在你的回调中使用它。我会更新答案

【参考方案2】：

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

【讨论】：

是的，这行得通，但发生的情况是 $.getJSON() 调用之后的任何内容都在 $.getJSON 回调之前运行，因为它是异步的。如何仅在运行 getJSON 回调后运行操纵 self.data 的代码？