vuejs2 - Vue计算属性不更新对象文字
问题描述
我正在构建一个 GeoJSON 编辑器,它在vue2-google-maps中显示预览。挑战之一是将 GeoJSON 转换coordinates
为LatLngLiteral
's 以用作<GmapMarker>
、<GmapPolygon>
或<GmapPolyline>
. 我的解决方案是使用计算属性。因此,当 GeoJSON 发生变化时,地图对象也会发生变化。像这样:
computed: {
mapObject() {
// If the geometry is a point, just assign geometry.coordinates into `lat` and `lng`
if (this.$data.geometry.type === "Point") return ({
lat: this.$data.geometry.coordinates[1],
lng: this.$data.geometry.coordinates[0],
});
// If it's a polygon, grab the first set of coordinates (we aren't supporting polygons with holes for now).
// then splice off the last element (Google Maps' polygon automatically loop the shape, unlike GeoJSON's convention),
// then we map the values into an array of LatLngLiterals.
if (this.$data.geometry.type === "Polygon") return this.$data.geometry.coordinates[0].splice(-1, 1).map(e => ({lat: e[1], lng: e[0]}));
// If it's a LineString, do as above, without the splicing.
if (this.$data.geometry.type === "LineString") return this.$data.geometry.coordinates.map(e => ({lat: e[1], lng: e[0]}));
}
},
问题是,这不会更新Point
类型。不过,这似乎适用于Polygon
和LineString
类型。任何帮助,将不胜感激。
解决方案
推荐阅读
- android - 华为手机Unity项目输入法不完整弹出
- python - 您如何获取组合结果并保存到列表中?
- llvm - 如何在 LLVM 中实现反向数据流分析传递?我们需要自己实现worklist算法吗?
- android - 在 buttonclick 上更改 TextView 文本时面临问题
- docker - 如何获取服务的端口号 - Docker 撰写文件
- php - 在 eloquent 查询 Laravel 期间编辑字段
- node.js - 如何将参数从 URL 传递到 ajax 请求?快速网络应用程序
- html - 如何使用 VBA 获取 HTML 代码中的项目以实现自动化
- java - 在使用 java 的 rest-assured 执行操作时无法获取断言的响应主体数据
- css - 使最后一个网格单元不活动