🙄

Vue.js｜FirestoreのarrayRemoveで配列内のobject（要素）を削除する方法

2022/05/21に公開

Firebase

前提

Firestoreデータ構造はこちらです。

Collection
└ id1
 └ Field1（文字列）
 └ Field2（配列）
  └ 0
   └ {id:000, name:taro1}
  └ 1
   └ {id:001, name:taro2}
  └ 2
   └ {id:002, name:taro3}
└ id2
 └ Field1（文字列）
 └ Field2（配列）
  └ 0
   └ {id:000, name:taro1}
  └ 1
   └ {id:001, name:taro2}
  └ 2
   └ {id:002, name:taro3}

公式ドキュメント

コレクション削除、フィールド削除、配列の要素削除（更新）は公式ドキュメントで紹介されています。

配列内のobject（要素）を削除したい

配列内のobject（要素）を削除したかったが、ドキュメントでみつけられなかったです。Google検索しても↑のドキュメントが紹介されているだけで具体的な対応策が紹介されている情報は少なかったです。（みつけられなかっただけかもしれません）

結論、こちらで削除できました。これを関数として、「削除」ボタンクリックで実行すれば削除できました。
単純に要素を削除するならば、オブジェクト自体の要素を指定して削除しているってだけですね。

vue.js

// 構文
await updateDoc(collectionRef, {
 user_posts_list: arrayRemove({
  id: データと一致するid,
  name: データと一致するname,
 })
});

// 具体例
await updateDoc(collectionRef, {
 user_posts_list: arrayRemove({
  id: this.id,
  name: this.name,
 })
});

もっと良い方法があれば教えてください。

前提

公式ドキュメント

配列内のobject（要素）を削除したい

Discussion