[實作]加上刪除功能
step1 新增資料刪除按鈕
在 DataTable.vue <v-data-table> 中間加上下方 template 這段：
這一段是為了製造一整排客製化的 icon。在下方設定 data header 部分加上：
{text: ‘Delete’, value: ‘del_data’}此時畫面多出一排垃圾桶 👻
step2 呼叫API
同個檔案下方加入 deleteData function。這邊代入一個員工 ID 參數，是為了刪除對應的資料。
step3 axios 設定
設定 aioxs 方法的 DataService.js，加上 deleteData，並代入準備好的員工 ID。
step4 修改 ID 設定寫法
原本沒有刪除功能，id 直接取資料長度 +1 做設定 📃
加上刪除功能，資料的長度不再是固定累加。id 作為資料識別的關鍵 key，不能重複！所以這邊做了相對應的修改。
修改過後，會在資料庫撈取數據時，即取得最後一筆資料的 id，之後新增資料會以此 id 為基準加一。
[實作]新增編輯 dialog
有了刪除功能，最後還差編輯功能 ✏️
這個部分相較之下複雜一下，故拆分成兩個段落說明，這邊介紹 Vuetify 提供的 dialog 功能。
step1 新增資料刪除按鈕
在 DataTable.vue <v-data-table> 中間加上下方 template 這段：
這邊 click 綁定了 openModal，會依 true false 來切換 dialog 的開啟及關閉。其他綁定的資訊，是為了彈開 dialog 時，希望可以代出選中的該筆資訊。
step2 新增 Modal
在 DataTable.vue 檔案中</div>區塊結束前，加上下方的程式碼：
下方需要引用 EditModal.vue 元件，並命名為 edit-modal。
step3 撰寫 Modal(Dialog) 內容
使用<v-dialog>，搭配 openModal 切換完成。要顯示該筆資料，以 props 傳進來，要點選關閉 dialog 則用 $emit 傳給父做關閉的動作。
(由於此區塊的程式碼較長，且混雜下個段落的內容，故先略。往下滑動至下個段落即可查看完整 EditModal.vue 程式碼。)
[實作]完成編輯功能
接續上個段落，提交更新的表單，需要收集以下資訊。
並在 DataService.js 新增 editData，更新整個表單使用 PUT。
完整的 EditForm.vue 程式碼如下：
完成全部的撰寫，此時瀏覽器的畫面操作如下：
看起來很不錯！功能也齊全了🎉
Vue + axios 小結
先認識 axios 並下載好預先準備的檔案，經由一步步實作，熟悉 Vue 搭配 axios 介接 API。此系列文章完整涵蓋 get, post, delete, put 增刪查改方法。實作小專案，若想再更優化，可以加上表單驗證功能。
最後，附上此練習的 GitHub 檔案連結 🔗 ，專案資料夾名稱：vue-axios-practice-Employees 。
✔️ TAG: V1.0 get & post
✔️ TAG: V2.0 加上delete & put
有任何指點或建議都可以在下方留言～🙏
If you “GET” the point, give me some claps. 👏👏👏
If you don’t, I will try “POST”. 📬
