Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8936

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

$
0
0

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

概要確認

こんな感じのfirestore のデータベースがあります。
スクリーンショット 2020-07-05 11.48.46.png

このときHPはこんな感じです。
スクリーンショット 2020-07-05 11.47.26.png

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

手順

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

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

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

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

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

上記の中にあるコチラ↓

book-management.vue
<buttonclass="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

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

スクリーンショット 2020-07-05 12.07.54.png

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

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

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

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

book-management.vue
<divv-show="showDelateAlarm"id="overlay"><divid="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と連動した削除ボタンの完成です。


Viewing all articles
Browse latest Browse all 8936

Trending Articles