CODEWITHSUNDEEP
vue.js
Pat Friedl
Pat Friedl

Reputation: 542

Vue.js method returning undefined when accessing data

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.

Upvotes: 0

Views: 1363

Answers (1)

Bert
Bert

Reputation: 82439

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.

Upvotes: 1

Related Questions