我有 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>