在rails加入vue元件是很容易的一件事情,只要在pack資料夾底下(細節以後再說😂)寫入下面這段程式碼。
在ERB掛載並使用即可。這邊的話示範用data屬性跟id掛上去的方式。若想要了解如何輕量化掛載vue可以參考Nic寫的這篇。
回到這次的主題。首先我先介紹銀行資訊的使用方式。送出按鈕不在元件上,元件上包含的只有4個輸入框,其中兩個是下拉式、另外兩個是單純的輸入文字框。
比較要動腦的地方:
- 如何在選銀行資訊的時候連動分行
- 如何在編輯頁面先載入編輯前的資料
首先我的銀行資料是在gov拿到的,gov的資料大概長這樣。它其實很簡單,所以在資料面上我們必須要多做些處理。
我把它放在helper裡面,helper的內容長這樣:
這邊介紹一個東西叫做lodash,像lodash, underscore, ramda都是很有名的資料處理工具,任何我們可能想到的兜資料的方法在這邊套件都有,上面輸出的Bank, Branch要在vue元件使用。
上面為 bank-selector主體,剩下的部分有空更新…