Question

我使用Vue.js填充位置列表，并使用使用该地址返回格式化地图链接的方法。

问题是在该方法中，尝试返回this.Address以undefined结尾。这就是我所拥有的：

// 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>

现在，我必须将地址，城市，州和邮政编码传递回模型的方法，我知道这是错误的 - 但我无法找到任何内容。关于获取值的正确方法的vue.js文档。

使用该方法的正确方法是什么？＃34;这个＆＃34;正常吗？谢谢你的帮助。

Answer 1

this.Address不起作用，因为Address不属于您的数据。看起来你正在做的是迭代response，它以某种方式填充了位置。

您可以只是将location传递给getDirections而不是每个参数。

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

将模板更改为

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

通常，在Vue方法中，this将引用Vue本身，这意味着可以访问在Vue上定义的任何属性（包括data中定义的属性）通过this（除非方法内部有回调错误地捕获this）。在您的情况下，您可以通过this中的getDirections引用任何成功，错误响应，wsdlLastResponse，t，familyId，brandId，srchRadius，lat，lon或响应。

Vue.js方法在访问数据时返回undefined

1 个答案: