用Vue & Firebase 實作簡易購物網站12.管理商品頁面(二)(Firebase & Vuejs)

程式碼內容:

二、增加儲存商品標籤及圖片事件，加上標籤及圖片預覽顯示

於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

(三)更新資料(更新商品內容)

Add data to Cloud Firestore | Firebase

返回文章列表➯