Homework

[yowko]

https://github.com/yowko/vue-ubike-information.git

[kurotanshi]

不用發 PR 給我，merge 回去反而會蓋掉我的原檔 XD

[kurotanshi]

有把站點的可用狀態標示出來，也可同時針對多個欄位進行搜尋，這點很不錯。

在語系切換的時候，當某個欄位被隱藏之後，再切回來會出現空的標籤：

這裏建議可以把中英文語系的切換用類似字典檔的方式作切換，像 colNames 與 colENNames 的做法， 再透過判斷語系的方式輸出。

例如：

data: {
  lang: 'tw', // or 'en'
  colNames: {
    'tw': {
      'sno':'#',
      'act':'狀態',
      'sna':'場站名稱',
      'sarea':'場站區域',
      'ar':'地址',
      'lat':'經緯度',
      'sbi':'目前可用車輛',
      'tot':'總停車格',
      'bemp':'空位數量',
      'mday':'資料更新時間'
    },
    'en': {
      'sno':'#',
      'act':'Status',
      'snaen':'Site Name',
      'sareaen':'Area',
      'aren':'Address',
      'lat':'Latitude and longitude',
      'sbi':'Availables',
      'tot':'Total',
      'bemp':'Empty psaces',
      'mday':'Update Time'
    }
  }
}

那麼 HTML 就可以寫成

    <table>
      <tr>
        <th>{{ colNames[lang].act }}</th>
        <th>{{ colNames[lang].sna }}</th>
        <th>{{ colNames[lang].sarea }}</th>
        <th>{{ colNames[lang].ar }}</th>
        <th>{{ colNames[lang].sbi }}</th>
        <th>{{ colNames[lang].tot }}</th>
        <th>{{ colNames[lang].bemp }}</th>
      </tr>
    </table>

類似這樣的做法，這樣就不用特別用 v-if 寫兩段，卻是做一樣的事情。

當然在 snaen (EN) 或 sna (TW) 這種都是代表站場名稱就需要另外處理，以上是一些實務上的處理方式，提供給你參考。