Vue.js method returning undefined when accessing data

Question

I'm using Vue.js to populate a list of locations, and using a method that should return a formatted map link using the address.

The problem is that in the method, trying to return this.Address ends up in undefined. Here's what I've got:

// the Vue model
pbrplApp = new Vue({
    el: '#pbrpl-locations',
    data: {
        'success' : 0,
        'errorResponse' : '',
        'wsdlLastResponse' : '',
        't' : 0,
        'familyId' : 0,
        'brandId' : 0,
        'srchRadius' : 0,
        'lat' : 0,
        'lon' : 0,
        'response' : []
    },
    methods: {
        getDirections: function(address,city,st,zip){
            // THIS Doesn't work:
            //var addr = this.Address + ',' + this.City + ',' + this.State + ' ' + this.Zip;
            var addr = address + ',' + city + ',' + st + ' ' + zip;
            addr = addr.replace(/ /g, '+');
            return 'https://maps.google.com/maps?daddr=' + addr;
        }
    }
});


// the template
<ul class="pbrpl-locations">
<template v-for="(location,idx) in response">
    <li class="pbrpl-location" :data-lat="location.Latitude" :data-lon="location.Longitude" :data-premise="location.PremiseType" :data-acct="location.RetailAccountNum">
        <div class="pbrpl-loc-idx">{{idx+1}}</div>
        <div class="pbrpl-loc-loc">
            <div class="pbrpl-loc-name">{{location.Name}}</div>
            <div class="pbrpl-loc-address">
                <a :href="getDirections(location.Address,location.City,location.State,location.Zip)" target="_blank">
                    {{location.Address}}<br>
                    {{location.City}}, {{location.State}} {{location.Zip}}
                </a>
            </div>
        </div>
    </li>
</template>
</ul>

Right now, I'm having to pass the address, city, state and zip code back to the model's method, which I know is wrong - but I can't find anything in the vue.js docs on the proper way to get the values.

What's the proper way to get the method to reference "this" properly? Thanks for your help.

You don't seem to have the Address, City, State, etc properties in your data so why would you expect them to be anything but undefined? — Phil
– Phil, Commented May 5, 2017 at 3:54

Bert · Accepted Answer · 2017-05-05 04:03:58Z

1

this.Address doesn't work because Address is not part of your data. It looks like what you are doing is iterating through response, which somehow gets populated with locations.

You could just pass location to getDirections instead of each of the parameters.

getDirections(location){
    let addr = location.Address+ ',' + location.City + ',' + location.State + ' ' + location.Zip
    ....
}

And change your template to

<a :href="getDirections(location)" target="_blank">

In general, in Vue methods, this will refer to the Vue itself, which means that any property that is defined on the Vue (of which properties defined in data are included) will be accessible through this (barring there being a callback inside the method that incorrectly captures this). In your case, you could refer to any of success, errorResponse, wsdlLastResponse, t, familyId, brandId, srchRadius, lat, lon, or response through this in getDirections.

edited May 5, 2017 at 4:03

answered May 5, 2017 at 3:54

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

1 Comment

Pat Friedl Over a year ago

Ok, thanks! I knew it was something I was missing. I'm migrating from Knockout, and it's quite a bit different. Thanks!

Collectives™ on Stack Overflow

Vue.js method returning undefined when accessing data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related