[英]How can I change data element on Vue.js?
<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.我想将 joah_add 数据放入 load_juso() 并在 add_place 中调用它。
first, I called load_juso() method.首先,我调用了 load_juso() 方法。
I think, 'this.joah_add = addr;'我认为,'this.joah_add = addr;' <- this code can access data and set data: joah_add value.
<- 此代码可以访问数据并设置数据:joah_add 值。
second, I called add_place method.其次,我调用了 add_place 方法。
why console print joah_add data -> null??为什么控制台打印 joah_add 数据 -> 空?
why doesn't it come out like 'this.joah_add = addr'?为什么它不像'this.joah_add = addr'那样出来?
please help me :'(请帮我 :'(
Javascript's this is not bound from the start Javascript的 this 从一开始就没有绑定
but is bound at the time of the call但在通话时绑定
So your this.joah_add = addr;所以你的 this.joah_add = addr; of this
这个的
may be pointing to daum instead of vue可能指向 daum 而不是 vue
Javascript's this in normal function mode Javascript 在正常功能模式下的 this
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希望它可以帮助你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.