Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

185
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda