用Vue & Firebase 實作簡易購物網站12.管理商品頁面(二)(Firebase & Vuejs)
Published in
Jul 27, 2020
程式碼內容:
二、增加儲存商品標籤及圖片事件,加上標籤及圖片預覽顯示
於MProducts.vue加上
(一)輸入#鍵即儲存資料的keyup事件-@keyup.51=”addTag”,其中51為#的keycode,可自行更換。以及v-for迴圈渲染-v-for=”(tag, index) in product.tags”,並用{{tag}}帶出標籤資料。
(二)加上監聽輸入內容的change事件-@change=”uploadImage”。以及v-for迴圈渲染-v-for=”(image, index) in product.images”,並用:src=”image”綁定圖片連結。
程式碼內容:
三、設定事件內容
將資料儲存至Firebase,程式碼內容:
四、設計標籤及圖片預覽區域
程式碼內容:
五、完成畫面
(一)新增及刪除商品
(二) Firebase 資料庫
六、參考資料
Firebase官方文件
(一)取得資料(取得商品資訊)
https://firebase.google.com/docs/firestore/query-data/get-data
(二)刪除資料(刪除商品項目)
https://firebase.google.com/docs/firestore/manage-data/delete-data
(三)更新資料(更新商品內容)