如何更改 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;...})
   ...
}

希望它可以帮助你