yandex地图中的多边形渲染

Question

我有VUE模板，在那里我用Yandex地图绘制了一些多边形。有2个id分别为123和124的多边形。123多边形从标记Fill获取颜色数据。为了测试，我试图从124 Polygon中的postgres中获取信息，并使用

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

所有变体都可以工作，但在第二个变体中，我在控制台中出现错误

vue.runtime.esm.js？2b0e:619[Vue warn]：呈现中出错："TypeError:无法读取未定义的""的属性"color">

在中找到

--->位于src/App.vue

我认为beforeCreate的async/await函数工作不好。

<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

第一次多边形为空

我用了这条

<yandex-map
v-if="polygons.length"