データにアクセスするときにVue.jsメソッドが返される

Question

私はVue.jsを使用して場所のリストを作成し、にはのアドレスを使用して書式設定されたマップリンクを返すメソッドを使用しています。

問題は、メソッドでthisを返そうとしています。アドレスは未定義で終わります。ここで私が持っているものです：

// 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ドキュメント内のもの。

"this"を正しく参照するには、どのような方法が適していますか？ご協力いただきありがとうございます。 Addressはあなたのデータの一部ではないため、

Answer 1

this.Addressは機能しません。あなたがやっていることは、responseを繰り返しているように見え、何とか位置情報が入力されます。

は、それぞれのパラメータの代わりにlocation~getDirectionsになります。

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

そしてthisはVueの上で定義されている任意のプロパティを（プロパティが定義されているのことを意味し、Vueの自分自身を参照する、Vueの方法で、一般的には

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

にテンプレートを変更しますdataが含まれています）は、thisからアクセスできます（このメソッド内には、thisを誤って取得するコールバックは含まれません）。あなたの場合、成功、errorResponse、wsdlLastResponse、t、familyId、brandId、srchRadius、lat、lon、またはthisのgetDirectionsのレスポンスのいずれかを参照することができます。