東京メトロAPI+vue.js = トイレ検索 ref: http://qiita.com/halhide/items/840645c498ef68142048

file0.txt

%div.container-fluid
  %div.row
    %div.form-group
      %div.col-sm-10
        %select.form-control.stations{"v-model" => "selected", "v-on" => "change: onChange(this)"}
          %option{"v-repeat" => "stations", "value" => "{{name}}"} {{title}}
  %div.row.facilities
    %div.inside-gate
      %h3 改札内:{{insideCount}}
      %div.list-group
        %div.list-group-item{"v-repeat" => "facilities | filterBy 'true' in inside"}
          %h4.list-group-item-heading {{name}}
          %p.list-group-item-text
            %span{"v-repeat" => "assistant"} {{{$value | pictgram}}}
    %div.outside-gate
      %h3 改札外:{{outsideCount}}
      %div.list-group
        %div.list-group-item{"v-repeat" => "facilities | filterBy 'false' in inside"}
          %h4.list-group-item-heading {{name}}
          %p.list-group-item-text
            %span{"v-repeat" => "assistant"} {{{$value | pictgram}}}

file1.js

// トイレ情報View
facilitiesView = new Vue({
  el: ".facilities",
  data: {
    facilities: []
  },
  computed: {
    insideCount: function() {
      return _.filter(this.facilities, function(facility) {
        return facility.inside;
      }).length;
    },
    outsideCount: function() {
      return _.filter(this.facilities, function(facility) {
        return !facility.inside;
      }).length;
    }
  },
  methods: {
    setStation: function(name) {
      // FACILITIESはあらかじめ定義しておく
      this.$data.facilities = FACILITIES[name];
    }
  }
});

// 駅選択
stationsView = new Vue({
  el: ".stations",
  data: {
    stations: [],
    selected: "" // 選択された駅
  },
  methods: {
    updateStations: function() {
      $data = this.$data;
      navigator.geolocation.getCurrentPosition(function(position) {
        // 最寄駅検索
        $.getJSON("/stations?lat=" + position.coords.latitude +
          "&lon=" + position.coords.longitude).done(function(stations){
          $data.stations = stations;
          if(stations.length > 0) {
            $data.selected = stations[0].name
            facilitiesView.setStation($data.selected);
          }
        });
      });
    },
    onChange: function() {
      facilitiesView.setStation($data.selected);
    }
  }
});