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> 

です私はすることができる午前ユーザー名を取得します。しかし、私はlatとlngのnull値をゲットしています。

地図上をクリックすると、私はLAT値とLNG値を印刷することができますが、同じ値を渡すことはできません。誰でも問題を解決するために私を助けてもらえますか？

Answer 1

「lat」入力フィールドのvalue属性がプログラムによって変更されていることをv-modelが認識していません。代わりに、あなたはこのような何かを行うことができます：。

<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; 
     ...