更新数组应更新HTML

时间:2016-03-26 13:37:56

标签: javascript vue.js

我正在使用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);
       },
    }
});

0 个答案:

没有答案