vue js에서 lat 및 lng 값을 전달할 수 없습니까?

Question

vue js를 사용하고 있으며 사용자 이름을 전달할 수 있습니다. 하지만 위도와 경도 값을 전달할 수는 없습니다. 확인하면 username을 게시 할 수 있지만 lat 및 lng는 null로 표시됩니다. 지도를 클릭하면

내 HTML 코드는

<form id="submitBox" method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);"> 
<div id="map"></div> 
<input name="lat" type="text" id="lat" v-model="lat"><br> 
<input name="lng" type="text" id="lng" v-model="lng"> 
<input name="username" type="text" class="form-control" id="name" placeholder="Name" required="required" v-model="username" data-parsley-minlength="4"/> 
</form> 

입니다. 나는 위도와 LNG 값을로드 할 수 있어요하지만 맵 값을로드

내 스크립트를 전달하는 아베 있지 않다

<script> 
//map.js 

//Set up some of our variables. 
var map; //Will contain map object. 
var marker = false; ////Has the user plotted their location marker? 

//Function called to initialize/create the map. 
//This is called when the page has loaded. 
function initMap() { 

    //The center location of our map. 
    var centerOfMap = new google.maps.LatLng(52.357971, -6.516758); 

    //Map options. 
    var options = { 
     center: centerOfMap, //Set center. 
     zoom: 7 //The zoom value. 
    }; 

    //Create the map object. 
    map = new google.maps.Map(document.getElementById('map'), options); 

    //Listen for any clicks on the map. 
    google.maps.event.addListener(map, 'click', function(event) {     
     //Get the location that the user clicked. 
     var clickedLocation = event.latLng; 
     //If the marker hasn't been added. 
     if(marker === false){ 
      //Create the marker. 
      marker = new google.maps.Marker({ 
       position: clickedLocation, 
       map: map, 
       draggable: true //make it draggable 
      }); 
      //Listen for drag events! 
      google.maps.event.addListener(marker, 'dragend', function(event){ 
       markerLocation(); 
      }); 
     } else{ 
      //Marker has already been added, so just change its location. 
      marker.setPosition(clickedLocation); 
     } 
     //Get the marker's location. 
     markerLocation(); 
    }); 
} 

//This function will get the marker's current location and then add the lat/long 
//values to our textfields so that we can save the location. 
function markerLocation(){ 
    //Get location. 
    var currentLocation = marker.getPosition(); 
    //Add lat and lng values to a field that we can save. 
    document.getElementById('lat').value = currentLocation.lat(); //latitude 
    document.getElementById('lng').value = currentLocation.lng(); //longitude 
} 


//Load the map when the page has finished loading. 
google.maps.event.addDomListener(window, 'load', initMap); 
</script> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> 

내 VUE의 JS 코드는 내가 수 있어요

<script> 
submitBox = new Vue({ 
el: "#submitBox", 
    data: { 
    lat : '', 
    lng : '', 
    username: '', 

    }, 
    methods: { 
    handelSubmit: function(e) { 
      var vm = this; 
      data = {}; 
      data['lat'] = this.lat; 
      data['lng'] = this.lng; 
      data['username'] = this.username; 
      $.ajax({ 
       url: 'http://127.0.0.1:8000/api/add/post/', 
       data: data, 
       type: "POST", 
       dataType: 'json', 
       success: function(e) { 
       if (e.status) 
       { 
       alert("Success") 
      } 
       else { 
       vm.response = e; 

       alert("Failed") 
       } 
      } 
      }); 
      return false; 
} 
}, 
}); 
     </script> 

입니다 사용자 이름을 얻으십시오. 그러나 위도와 경도에 대해 null 값을 얻고 있습니다.

지도에서 클릭하면 LAT 값과 LNG 값을 인쇄 할 수 있지만 같은 값을 전달할 수는 없습니다. 아무도 나를 해결할 수 있도록 도와주세요.

Answer 1

"lat"입력 필드의 값 속성이 프로그래밍 방식으로 변경되었음을 v- 모델이 인식하지 못합니다. 대신, 당신은 같은 것을 할 수 있습니다.

<input name="lat" type="text" id="lat" ref="myLatField" v-model="lat"> 

methods: { 
    handelSubmit: function(e) { 
     var vm = this; 
     data = {}; 
     data['lat'] = this.$refs.myLatField.value; 
     ...