How can I change data element on Vue.js?

Question

  <div id="SearchAddress">
    <div class="main_class">
      <div class="find_juso_map">
        <input type="button" v-on:click="load_juso" value="주소 검색"><br>
        <div id="map" style="width:300px;height:300px;margin-top:10px;"></div> 

        <input type="text" id="sample5_address" placeholder="메모">
        <input type="button" v-on:click="add_place" value="장소 추가"><br>
      </div>
      <div class="set_juso_list">
        <h4>요기조아</h4>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'SearchAddress',
  data() {
    return {
      center: new window.kakao.maps.LatLng(33.450701, 126.570667),
      geocoder: new window.kakao.maps.services.Geocoder(),
      joah_add: null,
      joah_list: {}
    }
  },
  props: {
  },
  mounted () {
  var container = document.getElementById('map');
      var options = {
        center: this.center,
        level: 3
      };
  new window.daum.maps.Map(container, options);
  },
  methods: {
    load_juso() {
      new window.daum.Postcode({
        oncomplete: function(data) {
          var addr = data.address; // 최종 주소 변수
          console.log(addr,'주소')
          this.joah_add = addr;
          console.log(this.joah_add ,'조아조아')
          // // 주소로 상세 정보를 검색
          new window.kakao.maps.services.Geocoder().addressSearch(data.address, function(results, status) {
            // 정상적으로 검색이 완료됐으면
            if (status === window.daum.maps.services.Status.OK) {
              var result = results[0]; //첫번째 결과의 값을 활용
              // 해당 주소에 대한 좌표를 받아서
              var coords = new window.daum.maps.LatLng(result.y, result.x);
              // 지도를 보여준다.
              var container = document.getElementById('map');
              var map = new window.daum.maps.Map(container, {center: coords,level: 3});
              container.style.display = "block";
              map.relayout();
              map.setCenter(coords);
              new window.daum.maps.Marker({position: coords, map: map}).setPosition(coords);
            }
          });
        }
      }).open();
    },
    add_place() {
      console.log('장소추가',this.joah_add)
    }
  }
}
</script>

I want to put joah_add data in the load_juso() and call it in the add_place.

first, I called load_juso() method.

I think, 'this.joah_add = addr;' <- this code can access data and set data: joah_add value.

second, I called add_place method.

why console print joah_add data -> null??

why doesn't it come out like 'this.joah_add = addr'?

please help me :'(

Answer 1

Javascript's this is not bound from the start
but is bound at the time of the call
So your this.joah_add = addr; of this
may be pointing to daum instead of vue
Javascript's this in normal function mode
points to whoever calls it
So

new window.daum.Postcode({... this.joah_add = addr})

could be equivalent to

new window.daum.Postcode({... daum.joah_add = addr})

and not

new window.daum.Postcode({... vue.joah_add = addr})

And your

add_place() {
      console.log('장소추가',this.joah_add)
    }

should be

add_place() {
      console.log('장소추가',vue.joah_add)
    }

So here's what you might need to do

load_juso() {
    const that = this
   new window.daum.Postcode({… that.joah_add = addr;...})
   ...
}

Hope it can help you