Question

尽管主题上有很多线程，但我无法弄清我的错误以及为什么我的“道具”在地图组件中仍然未定义。

这是根实例：

import Vue from "vue/dist/vue.esm.js";
import mapComponent from "./map-component.vue";

let vm = new Vue({
  el: "#app",
  template: `
  <map-component> v-bind:feature-collection="featureCollection" </map-component>
  `,
  components: {
    mapComponent
  },
  data: {
    featureCollection: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {},
          geometry: {
            type: "Polygon",
            coordinates: [
              [
                [14.501953124999998, 46.619261036171515],
                [21.884765625, 46.619261036171515],
                [21.884765625, 48.922499263758255],
                [14.501953124999998, 48.922499263758255],
                [14.501953124999998, 46.619261036171515]
              ]
            ]
          }
        }
      ]
    }
  }
});

和我的地图组件：

<template>
<div id="map-placeholder">
    <div ref="mapContainer" class="map-container"></div>
</div>
</template>

<script>
import L from "leaflet";
import "leaflet.markercluster";

export default {
  name: "map-component",
  data() {
    return {
      map: null,
      markers: null,
      tileLayer: null,
      layers: null
    };
  },
  props: [ "featureCollection" ],
  methods: { ... },
  mounted() {
    this.initMap();
    this.initLayer();
    this.addLocationGeoJson("observation",this.featureCollection.features)
  }
};
</script>

由于this.addLocationGeoJson("observation",this.featureCollection.features)未定义，因此脚本在featureCollection处失败。可用的完整代码here。

谢谢您的帮助。

Answer 1

<map-component> v-bind:feature-collection="featureCollection" </map-component>

检查标签的打开和关闭位置。

应为：<map-component v-bind:feature-collection="featureCollection">

Vue 2中的未定义道具

1 个答案: