Question

我正在使用vue.js构建我的第一个应用程序，但我不知道为什么我的首选JavaScript函数不起作用。

我导入JSON文件并尝试从中构建geojson对象。为此，我需要将其latlong字符串（例如latlon:"52.3723138,0.4903593"）拆分为数字数组[52.3, 0.49]。 String.split()似乎是一个明显的功能，但它在这种环境下无效。

json文件具有以下结构：

{ affiliates: [  ] }

我将JSON附属组件数组作为数据参数传递给makeGeoJson函数。

这是我尝试的代码：

makeGeoJson(data) {
  var geoJsonFeatures = [];
  data.forEach(function(gym) {
    var feature = {
      "type": "Feature",
      "properties": gym,
      "geometry": {
        "type": "Point",
        "coordinates": [parseFloat(gym.latlon.split(",")[0]), parseFloat(gym.latlon.split(",")[1])]
      }
    };
    geoJsonFeatures.push(feature);
  });
},

我得到的错误是

TypeError: Cannot read property 'split' of undefined
    at eval (eval at 50 (http://localhost:8080/0.9506ad4988fb1af5b77e.hot-update.js:7:1), <anonymous>:47:37)

我正在使用Vue.js 2.2并使用vue-cli进行设置。

这与为什么我也无法在同一个函数中将数据推送到数组有关吗？

Answer 1

您的数据很可能与预期不符。我会把console.log（）检查：

var geoJsonFeatures = [];
data.forEach(function(gym) {
    console.log(gym);
    var feature = {

此外，当您遇到这样的错误时，您的脚本将无法继续，因此您的推送逻辑将无法访问。

Answer 2

TypeError: Cannot read property 'split' of undefined表示属性gym.latlon不存在。并不是拆分不按预期工作或拆分不存在。这正是您无法推送数据的原因。一旦抛出错误，它就会向上传播直到它被某个地方捕获，所以它会使你的整个功能短路。

// Error gets propagated to the caller of this function and beyond
// if you never handle it.
makeGeoJson(data) {
  var geoJsonFeatures = [];
  data.forEach(function(gym) {
    var feature = {
      "type": "Feature",
      "properties": gym,
      "geometry": {
        "type": "Point",
        // Throws here, so you get here once and never get past it.
        // gym.latlon does not exist. Double check property name and
        // object structure.
        "coordinates": [parseFloat(gym.latlon.split(",")[0]), parseFloat(gym.latlon.split(",")[1])]
      }
    };
    // You never get here.
    geoJsonFeatures.push(feature);
  });
},

正如其他人指出的那样，记录gym，你会发现out没有属性latlon。

另外，你可以采取另一种很好的语法来避免将字符串拆分两次（一旦你有了预期的对象）：

gym.latlon.split(",").map(function (point) {
  return parseFloat(point);
})

为什么赢得了.split（）函数与vue.js 2一起工作？

2 个答案: