I have the following issue:
I am working on a vue.js openlayer map project. In my mounted() section I have an event handler which listens to the moving of features on the map. The new coordinates are well displayed in the console.log inside my event listener. Now, I would like to display the new coordinate in a vuetify v-text-field with v-model and later store in the vuex store.
My problem is that the coordinate data assigned to this.coordinate inside the event listener is not available inside vuetify v-text-field.
I spent several ours trying lots of different things. Despite dozens of searches on the web I did not come across a solution.
Any hints are welcomed.
Below the skeleton of the code:
<script>
export default {
data() {
return {
coordinates: [0,0]
}
},
mounted() {
[...]
selectedFeature.on('add', function(event) {
// now we create an listener on change events
var feature = event.element;
feature.on('change', function(event){
let waypFeature = event.target.clone();
let waypCoord = waypFeature.getGeometry().transform('EPSG:3857', 'EPSG:4326').getCoordinates();
console.log("selectedFeature(change) / Coordinates waypCoord: %s/%s", waypCoord[0], waypCoord[1])
this.coordinates
/* I search for a a way to write the array waypCoord into the array test defined in data
(ultimately I need to write array into the vuex store) */
})
})
// setup map
const map = new Map({
layers: layer,
target: 'map',
view: view,
});
},
}
</script>
<template>
<v-form v-model="formValidity">
<v-card>
<!-- Section for main data -->
<v-card-text class="my-5">
<v-row>
<v-col cols="12">
<!-- v-model keeps displaying the initial value [0,0] -->
<v-text-field
v-model="coordinates"
label="Remarks"
type="text"
dense
/>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-form>
</template>