我有一个Vue组件BaseMap，其中包含一个标记组件Location。 “位置”组件具有一个可以标记的多边形标记。

// BaseMap
<GmapMap>
  <Location :location="location" />
</GmapMap>


// Location
<gmap-marker>
  <gmap-polygon
    ref="polyMarker"
    :editable="true"
    :path="location.path"
    @mouseup="updatePath('polyMarker')"
  />
</gmap-marker>

<script>

  methods: {
   updatePath(ref_name){
     console.log(this.$refs[ref_name].path) // same array as origin
   }
  }

</script>

如何访问多边形的新编辑点？如果使用this。$ ref.polyMarker.path，我将不断获取原始的点数组，而不是新的点。

编辑

在与Mrupsidown讨论之后，我继续在最小的应用程序codeandbox中编写了代码。存在相同的问题。

Dependancies:
- vue
- vue2-gmap-cuspom-marker

//////////////////////////////////////////////////////////////
// main.js
import Vue from "vue";
import App from "./App.vue";
import * as VueGoogleMaps from "vue2-google-maps";

Vue.config.productionTip = false;

Vue.use(VueGoogleMaps,{
  load: {
    //    libraries: "places",// This is required if you use the Autocomplete plugin
    key: "[USE YOUR OWN KEY]"
  }
  //  autobindAllEvents: false,//  installComponents: true
});
new Vue({
  render: h => h(App)
}).$mount("#app");


//////////////////////////////////////////
//App.vue

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: "Avenir",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>


//////////////////////////////////////////////////////
// HelloWorld.vue

<template>
  <div>
    <baseMap/>
  </div>
</template>

<script>
import baseMap from "@/components/baseMap";

export default {
  name: "HelloWorld",components: { baseMap },props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>


////////////////////////////////////////////////////
//baseMap.vue

<template>
  <div>
    <GmapMap :style="'height:500px'" :center="center" :zoom="zoom">
      <Location :location="location"/>
    </GmapMap>
  </div>
</template>

<script>
import Location from "@/components/Location";

export default {
  name: "baseMap",components: { Location },data: function() {
    return {
      center: { lat: -33.9249,lng: 18.4241 },zoom: 12,location: {
        path: [
          { lat: -33.91170210440241,lng: 18.422548745513268 },{ lat: -33.90993912517883,lng: 18.422806237578698 },{ lat: -33.90874597713464,lng: 18.42422244393856 },{ lat: -33.90482806012767,lng: 18.42952248895199 },{ lat: -33.90073186345211,lng: 18.42428681695492 },{ lat: -33.90128397100101,lng: 18.420596097350426 },{ lat: -33.90256627151344,lng: 18.417656396270104 },{ lat: -33.90367045927834,lng: 18.416454766631432 },{ lat: -33.90532671411109,lng: 18.417913888335534 },{ lat: -33.908389810302396,lng: 18.413579438567467 },{ lat: -33.91084733115123,lng: 18.41703412377865 },{ lat: -33.91170210440241,lng: 18.422548745513268 }
        ]
      }
    };
  },props: {
    msg: String
  }
};
</script>

<style>
</style>



/////////////////////////////////////////////////////////
// Location.vue

<template>
  <div>
    <gmap-marker>
      <gmap-polygon
        ref="polyMarker"
        :editable="true"
        :path="location.path"
        @mouseup="updatePath('polyMarker')"
      />
    </gmap-marker>
  </div>
</template>

<script>
import GmapCustomMarker from "vue2-gmap-custom-marker";

export default {
  name: "Location",components: {
    GmapCustomMarker
  },props: {
    location: {
      type: Object,default() {
        return {};
      }
    }
  },methods: {
    updatePath(name) {
      console.log(this.$refs[name].path);
    }
  }
};
</script>

<style>
</style>