Calling vue v-model from inside jquery code

Gandalf

I have this jquery code that i run when the mounted hook runs

  mounted() {
    this.$progress.finish();
    
    var geocoder = new google.maps.Geocoder();
var marker = null;
var map = null;
function initialize() {
      var $latitude = document.getElementById('latitude');
      var $longitude = document.getElementById('longitude');
      var latitude = -1.286389;
      var longitude = 36.817223;
      var zoom = 16;

      var LatLng = new google.maps.LatLng(latitude, longitude);

      var mapOptions = {
        zoom: zoom,
        center: LatLng,
        panControl: false,
        zoomControl: true,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      if (marker && marker.getMap) marker.setMap(map);
      marker = new google.maps.Marker({
        position: LatLng,
        map: map,
        title: 'Drag Me!',
        draggable: true
      });

      google.maps.event.addListener(marker, 'dragend', function(marker) {
        var latLng = marker.latLng;
        $latitude.value = latLng.lat();
        $longitude.value = latLng.lng();
        this.property_coordinates = 'hello world';
      });


    }
    initialize();
    $('#findbutton').click(function (e) {
        var address = $("#Postcode").val();
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker.setPosition(results[0].geometry.location);
                $(latitude).val(marker.getPosition().lat());
                $(longitude).val(marker.getPosition().lng());
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
        e.preventDefault();
    });
    
    
  },

I want to grab the coordinates when the marker is dragged and this should updat ethe v-model variable property_coordinates

google.maps.event.addListener(marker, 'dragend', function(marker) {
            var latLng = marker.latLng;
            $latitude.value = latLng.lat();
            $longitude.value = latLng.lng();
            this.property_coordinates = 'hello world';
          });

This this.property_coordinates = 'hello world'; does not update the v-model. How can i update the v-model from within jquery code?

Matt

There is nothing special required to update the property_coordinates property from JQuery or other javascript outside of Vue.

In this case, this in the event function is not bound to the vue component.

An arrow function will maintain this from he outer scope

google.maps.event.addListener(marker, 'dragend', (marker) => {
            var latLng = marker.latLng;
            $latitude.value = latLng.lat();
            $longitude.value = latLng.lng();
            this.property_coordinates = 'hello world';
          });

Otherwise you can create a reference to the outer vue this

const component = this
google.maps.event.addListener(marker, 'dragend', function (marker) {
  component.property_coordinates = 'hello world';
});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Vue - calling a method inside the vue model

Update Vue model from jQuery

calling pytest from inside python code

jquery - calling function from inside function

Vue.js v-model inside v-html

Calling a method inside model

Calling the vue method from inside an event from VueDraggable

Can i refactoring from repeating code this vue custom modifiers in multi v-model?

Vue JS - Bind select option value to model inside v-for

v-model inside vue draggable lost focus after keypress?

Calling a method inside Vue component from an outside class

v-model for child component and v-model inside child component Vue

Calling Python function from Cython code, inside a Google Colab notebook

Calling Attributes from Class inside of a Class Method, Code Error

Calling PHP function file_put_contents From Inside JQuery

Difference between calling new Vue() from main.js V/s calling from each and every component

Is it possible to use a v-model from inside a component template?

How to use v-model inside v-for loop in Vue js

My Vue Project v-model not working inside v-for loop

Clear v-model input from method in Vue2

Vue v-model data is from ajax undefined value

how to disable v-model input in Vue from mutating

Vue - Retrieve events and v-model from component

Calling a vue component into v-for

Calling a jquery function from code behind doesnt work

Calling Model method inside template file

Model is showing from inside

Is calling computed property from inside Vue method multiple times affecting the performance?

Calling a javascript function inside a vue component file