折线 - 使用 vue 3 的 Gmap [已关闭]

问：

我正在根据 api 数据在 vue 3 中创建折线。 因此，我正在从 API 数据中填充 path 属性。 一旦绘制了线条，当我单击任何一条折线时，就会有一种方法可以更改 strokeWeight，以便突出显示它（就好像它被选中一样）

this.polylineOptions[tradeId].strokeWeight = 3;
this.polylineOptions[tradeId].strokeColor = "red"; 

这是我写的要改变的行，但它没有反映出来。 在 Vue 开发者工具选项卡中，我可以看到 strokeColor 已更改，但 UI 没有反映。 同样的代码在 Vue 2 中有效。

我认为有一个技术故障，因为我在这里放置了我创建折线的方式，

export default {
    name: "AddGoogleMap",
    components: {
        popupFrom: PopUpFrom,
        popupTo: PopUpTo,
        GoogleMap,
        CustomMarker,
        Polyline
    },
    props: {
        tradeDetails: {
            type: Array,
            default: function () { return {} }
        }
    },

    data() {
        return {
            center: {
                lat: 46.2276,
                lng: 2.2137
            },
            polylineOptions: [{
                path: [],
                strokeColor: 'blue',
                strokeOpacity: 1,
                strokeWeight: 0.8,
                geodesic: true
            },
            {
                path: [],
                strokeColor: 'blue',
                strokeOpacity: 1,
                strokeWeight: 0.8,
                geodesic: true
            },
            {
                path: [],
                strokeColor: 'blue',
                strokeOpacity: 1,
                strokeWeight: 0.8,
                geodesic: true
            },
            {
                path: [],
                strokeColor: 'blue',
                strokeOpacity: 1,
                strokeWeight: 0.8,
                geodesic: true
            },
            {
                path: [],
                strokeColor: 'blue',
                strokeOpacity: 1,
                strokeWeight: 0.8,
                geodesic: true
            }],            
        };
    },

    async mounted() {
        this.loadTrades();
        this.addZoneMarkers();
        this.addPolyLinePaths();  
        this.highlightFirstTrade();            
        this.addToZoneMarkers();
        await this.addFromZoneMarkers();
    },

    methods: {
        addPolyLinePaths: function () {
            for (let element of this.trades) {
                let path = [
                    { lat: element.fromArea.Latitude, lng: element.fromArea.Longitude, name: element.fromArea.Name },
                    { lat: element.toArea.Latitude, lng: element.toArea.Longitude, name: element.toArea.Name }
                ];
                this.paths.push(path);
            }
            
            let counter = 0;
            for (let path of this.paths) {
                for (let cordinate of path) {
                    this.polylineOptions[counter].path.push({ lat: cordinate.lat, lng: cordinate.lng });
                }
                counter = counter + 1;
            }
            console.log(this.polylineOptions.length);
        },

        highlightFirstTrade: function () {
            
            this.polylineOptions[0].strokeWeight = 3;
            this.polylineOptions[0].strokeColor = '#0a2071';
            this.currentLine = this.paths[0];
        },

        lineHighlight: function (tradeId) {
            
            this.polylineOptions[tradeId].strokeWeight = 3;
            this.polylineOptions[tradeId].strokeColor = 'red';
            this.currentLine = this.paths[tradeId];           
            for (let idx = 0; idx < this.trades.length; idx++) {
                if (tradeId !== idx) {
                    this.polylineOptions[idx].strokeWeight = 0.8;
                }
            }
        }
    }    
}

这是我的JS

<Polyline v-for="(line, index) in paths" :options="polylineOptions[index]" @click="tabOpen(index, line)" id="'line'+(index+1)" />

这就是我在 Vue 中创建线条的方式