我正在使用VUE.JS更新数组的内容,应该在表格中显示。当我对我的服务器进行异步调用时,我需要等待更新应该显示的数组的响应。当收到responders
数组的数据时,如何让表刷新?
<div class="tabel-responsive">
<div class="table table-hover">
<thead>
<tr>
<th>ID</th>
</tr>
</thead>
<tbody>
<tr v-for="responder in responders">
<td>@{{ responder.userReference }}</td>
</tr>
</tbody>
</div>
</div>
VUE.JS
window.app = new Vue({
el: '#GISContainer',
data: {
latitude: '',
longitude: '',
// RESPONDERS
responders: '',
// GIS
mapCenterLocation: '',
// STORE
shared: store
},
computed: {
concatSearchAddress: function() {
return this.street + ' ' + this.postalCode + ' ' + this.city;
}
},
methods: {
// INCIDENT PROCESSING
processIncidentInformation: function() {
// Set GIS Map Center to new location
this.setMapCenterToSearchAddress();
// Get Latitude and Longitude of the given location and search for responders in range
getLatLng(this.concatSearchAddress, function(latlng) {
// Setup Latitude and Longitude
this.latitude = latlng[0].toFixed(6);
this.longitude = latlng[1].toFixed(6);
// Search for Responders in Range
this.searchForRespondersInRange();
}.bind(this));
},
// GIS
setMapCenterToSearchAddress: function() {
// set the location in map to the address given
setMapLocationToAddress(this.concatSearchAddress);
},
// RESPONDERS
searchForRespondersInRange: function() {
this.$http.get('v1/responders?'.concat("latitude=" + this.latitude + "&longitude=" + this.longitude)).then(function(response) {
console.log(response);
this.responders = response.data["data"];
}.bind(this));
},
getSelectedResponder: function(responder) {
this.selectedResponder = responder;
this.getResponderDevices(responder);
},
}
});