首页 > 解决方案 > Vue计算属性不更新对象文字

问题描述

我正在构建一个 GeoJSON 编辑器,它在vue2-google-maps中显示预览。挑战之一是将 GeoJSON 转换coordinatesLatLngLiteral'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类型。不过,这似乎适用于PolygonLineString类型。任何帮助,将不胜感激。

标签: vuejs2computed-properties

解决方案


推荐阅读