---
# System prepended metadata

title: Firestore 刪除資料delete

---

# Firestore 刪除資料delete
教學影片：[點這邊](https://www.youtube.com/watch?v=W1DwGBeS-KU&list=PLB4AdipoHpxYPjGo0n2m6tmCLud_iSEbv&index=36)



### 注意：這篇文章只是從database中刪除資料，但沒有realtime到顯示畫面喔

>  進入Products.vue [color=black]
> 
 :baby_chick: 在 v-for 循環的刪除按鈕中增加 **@click="deleteProduct(singleP.id)"**
 :baby_chick: 其中的 **singleP.id** 則為該項目的雲端id
 ```html=
<span @click="deleteProduct(singleP.id)">
    <i class="fa fa-times"></i>
</span>
 ```
 :baby_chick: **db.collection('雲端儲存名稱').doc(項目ID).delete()**
  :baby_chick: 其中的 **項目ID** 在我們點擊刪除按鈕的時候已被pass進去
```javascript=
methods:{
    deleteProduct(productID){
        if(confirm('確定要刪除嗎？')){
            db.collection('products').doc(productID).delete()
            .then(()=> {
                alert('商品已成功刪除')
            })
            .catch((err) => console.log(err))
        } else { }
    }
```
