Question

我有VUE模板，其中使用Yandex贴图绘制了一些多边形。有2个多边形，其ID为123和124。 123多边形从markerFill获取颜色数据。为了进行测试，我尝试使用

从124 Polygon中的postgres获取信息

 :markerFill="{color: polygon[0].color}"

所有变体都可以使用，但是在第二个变体中，控制台出现错误

vue.runtime.esm.js？2b0e：619 [Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性“颜色”

位于

---> 在src / App.vue

我认为我的async / await函数beforeCreate不能正常工作。

   <template>
    <div id="app">
        <yandex-map
            :coords="coords"
            :map-type="maptype">
            <ymap-marker
                marker-id="123"
                :marker-type="markerType"
                :coords="coordsPolygon"
                :markerFill="{color: markerFill}"
                @click="onClick"
                @contextmenu="contextMenu"
            ></ymap-marker>
            <ymap-marker
                marker-id="124"
                :marker-type="markerType"
                :coords="coordsPolygon2"
                :markerFill="{color: polygon[0].color}"
                @click="onClick"
                @contextmenu="contextMenu"
            ></ymap-marker>
        </yandex-map>
    </div>
</template>

<script>

import PolygonService from '../services/PolygonService'

export default {
  data: () => ({
    coords: [55.82934, 50.47381],
    coordsPolygon: [[[55.82934834500297, 50.473813972428545], [55.82502132761555, 50.48726256842927], [55.82543502707805, 50.48785265441253], [55.829752940206475, 50.474248490289035], [55.82934834500297, 50.473813972428545]]],
    coordsPolygon2: [[[55.82534666416819, 50.467352396297905], [55.825687888175935, 50.46737921838804], [55.82064169383499, 50.484153753567064], [55.82024304365505, 50.48365486269041], [55.8251956791464, 50.46728265886356], [55.82534666416819, 50.467352396297905]]],
    maptype: 'satellite',
    markerFill: 'ffffff',
    markerType: 'Polygon',
    polygon: []
  }),
  async beforeCreate () {
    this.polygon = (await PolygonService.get()).data
  },
  methods: {
    onClick (e) {
      var eMap = e.get('target')
      eMap.editor.startEditing()
    },
    contextMenu (e) {
      var eMap = e.get('target')
      console.log(11)
      eMap.editor.stopEditing()
    }
  }
}
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }
    .ymap-container {
        height: 776px;
    }
    .red {
        color: red;
    }
</style>

Answer 1

在Vue的生命周期中，beforeCreate挂钩在组件初始化时运行。数据尚未做出反应，事件尚未建立。

我建议改用created来获取组件的数据吗？

Answer 2

第一次多边形为空

我用了这一行

select * from employees where salary in (select distinct salary from employees order by salary desc FETCH FIRST 5 ROWS ONLY)

在Yandex地图中渲染多边形

2 个答案: