VueJS set Input field data

Question

I want to set the value of an input field with VueJS, when I receive updated information from another function. I do not clearly understand, how to update the value of the input field when the function getLatLng returns. When I output on the console, it works very well, so the functions are working. But how do I connect my input field properly to show the Latitude value? Do I need a computed property? or just a regular one?

HTML

<form>
<input type="text" class="Form" placeholder="Latitude" v-model="latitude" value="@{{ latitude }}">
</form>

VUE

var Vue = require('vue');
import VueResource from 'vue-resource';
Vue.use(VueResource);

window.app = new Vue({
    el: '#GISContainer',

    // Data to be stored
    data: {
        // Save Data for address, latitude and longitude
        address: '',
        latitude: '',
        defaultMapLocation: 'Fichtenstrasse 30 82256',

        // Responder Information
        responders: [
            {id: 1, name: 'Test 1'},
            {id: 1, name: 'Test 2'},
        ]
    },
    // Methods
    methods: {
        init: function() {
            initGISMap(this.$els.map);
            this.address === '' ? setMapLocationToAddress(this.defaultMapLocation) : setMapLocationToAddress(this.address);
        },
        setMapToSearchAddress: function() {
            setMapLocationToAddress(this.address);
            getLatLng(this.address, function(latlng) {
                this.latitude = latlng[0];
            })
        }
    }
});

External JS Function

function geocodeAddress(address, callback) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ address: address }, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            if (results.length > 0) {
                callback(results[0].geometry.location);
            } else {
                console.log("No results found");
            }
        } else {
            console.log("Geocoder failed due to: " + status);
        }
    });
}

function getLatLng(address, callback) {
    latLng = [];
    geocodeAddress(address, function(position) {
        latLng.push(position.lat());
        latLng.push(position.lng());
        callback(latLng);
    });
}

pespantelis · Accepted Answer · 2015-12-29 01:24:01Z

1

To set the latitude you should bind the this keyword:

getLatLng(this.address, function(latlng) {
  this.latitude = latlng[0];
}.bind(this))

answered Dec 29, 2015 at 1:24

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sesc360 Over a year ago

what is the difference between: var vm = this; used bedore the function and bind?

pespantelis Over a year ago

Please read this answer codereview.stackexchange.com/questions/49872/…

Collectives™ on Stack Overflow

VueJS set Input field data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related