Question

我想知道是否可以访问Vue组件的javascript文件中export default中的数据。我试图在routes函数内部获取calculateAndDisplayRoute()数组的内容。

overview.js

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var origin, dest;
  for (var route in this.routes /*<--HERE*/) {
    console.log('www')
    if(route.id == this.filter){
      console.log('true')
    }
  }
  directionsService.route({
    origin: 'Vancouver',
    destination: 'Chicago',
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

export default {
  name: 'fleet-overview',
  data () {
    return {
      view: '',
      routes: [], //<--HERE
      users: [],
      errorRoute: '',
      response: [],
      filter: 'searchby',
      searchTerm: '',
      users: [],

    }
  },
  created: function () {
    this.routeView();
  },
  methods: {
      initMap: function(){
        this.$nextTick(function(){
          var directionsService = new google.maps.DirectionsService;
          var directionsDisplay = new google.maps.DirectionsRenderer;
          var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 45.49, lng: -73.61},
            zoom: 9
          });
          directionsDisplay.setMap(map);
          var onChangeHandler = function() {
            calculateAndDisplayRoute(directionsService, directionsDisplay);
          };
          document.getElementById('filterselect').addEventListener('change', onChangeHandler);
        })
      }
//...
}

Answer 1

您可以使用call来适当地设置上下文（this）。

calculateAndDisplayRoute.call(this, directionsService, directionsDisplay);

或者您可以重新编写函数定义以接受上下文（您不能将其称为this，但可以将其称为context）。

function calculateAndDisplayRoute(context, directionsService, directionsDisplay) {
  ...
  for (var route in context.routes /*<--HERE*/) {
    console.log('www')
    if(route.id == context.filter){
      console.log('true')
    }
  }
  ...
}

然后在您的initMap中，您将传递this作为第一个参数：

calculateAndDisplayRoute(this, directionsService, directionsDisplay);

访问导出默认值以外的数据字段-Vue

1 个答案: