如何更改 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>

我想將 joah_add 數據放入 load_juso() 並在 add_place 中調用它。

首先，我調用了 load_juso() 方法。

我認為，'this.joah_add = addr;' <- 此代碼可以訪問數據並設置數據：joah_add 值。

其次，我調用了 add_place 方法。

為什么控制台打印 joah_add 數據 -> 空？

為什么它不像'this.joah_add = addr'那樣出來？

請幫我 ：'（

Answer 1

Javascript的 this 從一開始就沒有綁定
但在通話時綁定
所以你的 this.joah_add = addr; 這個的
可能指向 daum 而不是 vue
Javascript 在正常功能模式下的 this
指向誰叫它
所以

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

可能相當於

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

並不是

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

和你的

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

應該

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

所以這就是你可能需要做的

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

希望它可以幫助你