Vue.jsを使ってFirebaseのデータを削除する

Vue.jsを使ってFirebaseのデータベース firestore のデータを削除する方法をお伝えします。


# 概要確認

こんな感じのfirestore のデータベースがあります。
<img width="1122" alt="スクリーンショット 2020-07-05 11.48.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550650/251fed88-4f8c-e81e-8fae-cd55960c749b.png">

このときHPはこんな感じです。
![スクリーンショット 2020-07-05 11.47.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550650/80077f4f-6335-5249-10eb-8829611e611d.png)

今回のゴールは**HP上の×ボタンを押したらデータベース上のデータも連動して消える**です。

# 手順
このゴールを達成するためには以下の手順でコードを書いていきます。

1. ×ボタンを押すとindexをトリガーに、その項目のidをゲットする
2. その項目のidを変数に設定
3. さらにその変数をトリガーにして、削除ボタンで項目削除

# 1. ×ボタンを押すとindexをトリガーに、その項目のidをゲットする

削除ボタンを押すとその項目のindexをゲットします。

```book-management.vue
<tr v-for="(book, index) in books" :key="book.bookId">
          <td>
            <input v-model="book.title" type="text" />
          </td>
          <td>
            <input v-model="book.type" type="text" />
          </td>
          <!-- レンタルの可否 -->
          <td>
            <select v-model="book.rental">
              <option v-if="book.rental === 'ok'" value="ok">
                OK
              </option>
              <option v-else value="ng">
                NG
              </option>
            </select>
          </td>
          <!-- 所在 -->
          <td>
            <input v-model="book.currentPlace" type="text" />
          </td>
          <!-- レンタルボタン -->
          <td>
            <button
              v-if="book.rental === 'ok'"
              type="button"
              @click="onRentBookClick()"
            >
              借りる
            </button>
            <p v-else-if="book.rental === 'ng' && book.currentPlace !== '自分'">
              レンタル不可
            </p>
            <button v-else type="button" @click="onReturnBookClick()">
              返す
            </button>
          </td>
          <!-- 所有者 -->
          <td>
            <input v-model="book.owner" type="text" />
          </td>
          <!-- 削除ボタン -->
          <td>
            <button
              class="delete"
              @click="switchDelateAlarm(), getIndex(index)"
            >
              ×
            </button>
          </td>
</tr>
```

上記の中にあるコチラ↓

```book-management.vue
<button class="delete"
        @click="switchDelateAlarm(), getIndex(index)">
 ×
</button>

```

# 2. その項目のidを変数に設定

ここから**関数getIndex()**に引数indexを渡します。

そして関数getIndex()はコチラ。

```book-management.vue
    getIndex(index) {
      this.delateId = this.books[index].id
    },
```

これにより**delateId**が定義されました。


# 3. さらにその変数をトリガーにして、削除ボタンで項目削除

さて、下記の1番上の×ボタンを押します。

![スクリーンショット 2020-07-05 11.47.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550650/80077f4f-6335-5249-10eb-8829611e611d.png)

すると、このようなポップアップが出ます。

![スクリーンショット 2020-07-05 12.07.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550650/59e36391-0d95-2232-14cb-fca869d00803.png)

実は×ボタンを押すことで**関数getIndex()**以外にもうひとつ**関数switchDelateAlarm()**が起動するようになっています。

このポップアップはそれによるものです。

次はこの**ポップアップ上の削除ボタンを押すと実際に項目が削除される**ようにしていきます。

下記がポップアップのtemplateです。

```book-management.vue
    <div v-show="showDelateAlarm" id="overlay">
      <div id="delateAlarm">
        <p>この本の情報を削除します</p>
        <button @click="switchDelateAlarm">
          戻る
        </button>
        <button @click="switchDelateAlarm(), deleteItem(delateId)">
          削除
        </button>
      </div>
    </div>
```

**関数deleteItem()**の引数に先ほど定義した**変数delateId**を渡していますね。

では関数deleteItem()の内容はというと……

```book-management.vue
    deleteItem(deleteId) {
      db.collection("books").doc(deleteId).delete()
    }
```
こんな感じです。


# まとめ

以上でfirestoreと連動した削除ボタンの完成です。