Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

186
Views
vue.js: variable set in mounted() event listener not available using v-model

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>
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!