Vue.js - 単一ファイルコンポーネントのスクリプトセクションで小道具を使用する

Question

私はvueを初めて使い始めています。私はGoogleマップのdivのための単一のファイルコンポーネントを作った：

map.vue：

<template> 
    <div id="map" class="col-100">{{searchArea.radius}}</div> 
</template> 

<script> 
    function updateSearchLocation(latlng) { 
     this.searchArea.lat = latlng.lat(); 
     this.searchArea.long = latlng.lng(); 
    } 

    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 15, 
      streetViewControl: false, 
      mapTypeControl: false, 
      zoomControl: false 
     }); 
     google.maps.event.addListener(map, 'dragend', function() { 
      updateSearchLocation(map.getCenter()); 
     }); 
     addMyLocationButton(); 
     getMyLocation(); 
    } 

    window.initMap = initMap; 

    module.exports = { 
     props: { 
      searchArea: Object 
     } 
    } 
</script> 

（addMyLocationButton、getMyLocation）ここで呼ばれる他の機能は、このファイルと作業に定義されています。何がうまくいかないのは、updateSearchLocation関数内のsearchAreaオブジェクトにアクセスすることです。それが正常にこのコンポーネントに渡されます

searchArea: { 
    lat: null, 
    long: null, 
    radius: 2500 
} 

（私はVUE devのツールでこのコンポーネントでそれを見ることができます）：

は、私は私のアプリのルートでsearchAreaオブジェクトを持っています。別のコンポーネントでこのオブジェクトに基づいてAPI呼び出しを行うため、このmap.vueコンポーネントを使用してこのオブジェクトを更新します。

マップが表示されているため、initMapが呼び出されています。 getMyLocationメソッドは、ユーザーの現在の場所を取得し、同じupdateSearchLocation関数を呼び出します。

このように私のマップをロード：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx&callback=initMap"></script> 

Answer 1

プット機能をエクスポートされたオブジェクトに 'メソッド' オブジェクト内：受け入れとして

module.exports = { 
     props: { 
      searchArea: Object 
     }, 
     data: function() { 
      return { 
       latlng: whatever 
      } 
     },  
     methods: { 
      updateSearchLocation: function(this.latlng) {..... }, 
      initMap: function() {.. call updateSearchLocation() as this.updateSearchLocation(this.latlng) ... }, 
     } 
    }