javascript - 我无法在 vue js 中传递 lat 和 lng 的值？

Question

我正在使用 vue js，并且可以传递用户名。但我无法传递 lat 和 lng 值。检查时，我可以发布用户名，但纬度和经度为空。

我的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>

单击 map 时。我能够加载纬度和经度值，但我无法通过

我加载 map 值的脚本是

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

我能够获取用户名。但我得到的纬度和经度为空值。

但是当我点击 map 时，我可以打印 LAT 和 LNG 值，但我无法传递相同的值。有人可以帮我解决这个问题吗？

Answer 1

v-model 无法识别“lat”输入字段的值属性已通过编程方式更改。相反，你可以这样做:

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