为什么.split（）函数不能与vue.js 2一起使用？

Question

我正在使用vue.js构建我的第一个应用程序，但是对于为什么我的JavaScript函数无法正常工作感到迷茫。

我正在导入JSON文件，并尝试从中构建geojson对象。 为此，我需要将其latlong字符串（例如latlon:"52.3723138,0.4903593" ）拆分为一个数字数组，例如[52.3, 0.49] 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 ，您会发现latlon没有财产。

此外，还可以执行另一种不错的语法操作，避免将字符串分割两次（一旦您有了期望的对象）：

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