VueJS设置输入字段数据
VueJS set Input field data
当我从另一个函数接收更新信息时,我想用VueJS设置输入字段的值。我不清楚,当函数getLatLng返回时,如何更新输入字段的值。当我在控制台上输出时,它工作得很好,所以功能正常。但是如何正确连接输入字段以显示Latitude值呢?我需要计算财产吗?还是普通的?
HTML
<form>
<input type="text" class="Form" placeholder="Latitude" v-model="latitude" value="@{{ latitude }}">
</form>
VUE
var Vue = require('vue');
import VueResource from 'vue-resource';
Vue.use(VueResource);
window.app = new Vue({
el: '#GISContainer',
// Data to be stored
data: {
// Save Data for address, latitude and longitude
address: '',
latitude: '',
defaultMapLocation: 'Fichtenstrasse 30 82256',
// Responder Information
responders: [
{id: 1, name: 'Test 1'},
{id: 1, name: 'Test 2'},
]
},
// Methods
methods: {
init: function() {
initGISMap(this.$els.map);
this.address === '' ? setMapLocationToAddress(this.defaultMapLocation) : setMapLocationToAddress(this.address);
},
setMapToSearchAddress: function() {
setMapLocationToAddress(this.address);
getLatLng(this.address, function(latlng) {
this.latitude = latlng[0];
})
}
}
});
外部JS函数
function geocodeAddress(address, callback) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: address }, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results.length > 0) {
callback(results[0].geometry.location);
} else {
console.log("No results found");
}
} else {
console.log("Geocoder failed due to: " + status);
}
});
}
function getLatLng(address, callback) {
latLng = [];
geocodeAddress(address, function(position) {
latLng.push(position.lat());
latLng.push(position.lng());
callback(latLng);
});
}
要设置latitude
,您应该绑定this
关键字:
getLatLng(this.address, function(latlng) {
this.latitude = latlng[0];
}.bind(this))
相关文章:
- SIMPLE Javascript代码,用于显示谷歌电子表格中单个字段的数据
- 单击鼠标,用MySQL数据填充html表单输入字段
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- 基于javascript中的状态字段对动态行数据进行动态着色
- 有了字段的名称,我如何用空白数据初始化对象的未定义字段
- javascript绑定另一个select2输入字段rails的select2 inputonchange事件的数据
- 在Drupal7中扩展字段集时,修改collapse.js以从xml获取附加数据
- 本地存储自动完成/提前键入字段的数据
- 在输入字段中选择一个值,然后用相应的数据填充另一个字段
- 从包含ng的字段中获取表单数据,而无需使用ng模型
- 如何从一个表单的输入字段中获取数据,并使用JQuery在不同的表单中填充相同的输入类型
- 如何在页面加载时直接使用Javascript在输入字段中填写数据
- AngularJs的Kendo UI:当用户在网格中选择行时,如何在文本框字段上绑定数据
- 从Node.js中的JSON数据中提取JSON字段
- 在Meteor中加载带有采集数据的选择输入字段
- 生成动态表单输入字段,并在angularJS中以数组形式收集字段数据
- 如何检测从数据列表中选择时更改的输入字段
- 传递数据以填充在ajax Modal中加载的输入字段
- 如何使用“数据”传递数据?字段
- 如何获取“数据”字段从xhr.responseText