addListener에서 data에 접근하지 못하는데 어떻게하나요..?

마크를 누르면 해당가게 이름을 storeName에 넣어야 하는데 스코프 문제인지 storeName 에 접근이 안됩니다…
어떻게 해결해야할까요? 구조를 다시 바꿔야할까요…?

export default {
name: ‘ServiceEroll’,
data(){
return{
storeName: “여기”,
}
},
components: {
ServiceEnrollForm
},
mounted() {
if (window.kakao && window.kakao.maps) {
this.initMap();
} else {
const script = document.createElement(“script”);
/* global kakao */
script.src = “http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=fd19cf04fdf51376c09688db7233c214&libraries=services,clusterer,drawing”;
script.onload = () => kakao.maps.load(this.initMap);
document.head.appendChild(script);
}
},
methods: {
initMap() {
this.infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
var mapContainer = document.getElementById(“map”),
mapOption = {
center: new kakao.maps.LatLng(37.3968027500691, 126.920941421328), //고객이 등록한 정보가 default
level: 3,
};

  this.map = new kakao.maps.Map(mapContainer, mapOption);
  var geocoder = new kakao.maps.services.Geocoder();
  var ps = new kakao.maps.services.Places(); 
  ps.keywordSearch('남부터미널역 카페', this.placesSearchCB);
},
placesSearchCB: function (data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {

    var coords = new kakao.maps.LatLngBounds();

    for (var i=0; i<data.length; i++) {
        this.displayMarker(data[i]);    
        coords.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
    }       
    // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
    this.map.setBounds(coords);
}

},
changeName: function(place){
console.log(place.place_name);
},
displayMarker: function (place) {
// 마커를 생성하고 지도에 표시합니다

var marker = new kakao.maps.Marker({
    map: this.map,
    position: new kakao.maps.LatLng(place.y, place.x) 
    
});
// 마커에 클릭이벤트를 등록합니다

this.infowindow.open(this.map, this.marker);
kakao.maps.event.addListener(marker, 'click', function(){
  this.storeName = place.place_name; // 값을 접근할 수 없음
});

},

},

아래와 같이 화살표 함수로 변경해주세요.

kakao.maps.event.addListener(marker, 'click', () => {
    this.storeName = place.place_name;
    console.log(this.storeName);
 });

계속해서 찾아보다

var self = this;
kakao.maps.event.addListener(marker, ‘click’, function() {
self.storeName = place.place_name;
});

로 해결했습니다!

1개의 좋아요