Firestoreに保存しているデータを更新したいです

前提・実現したいこと

Nuxt.jsとFirebaseを使って調味料の残量を管理するようなWEBアプリを作っています。
nameと残量が入力されるたびに登録ボタンを押すと、Firestoreのpostsコレクションに追加されます。
cards配列にpushし、cardとして1つずつ表示しています。
ここから表示されているcardをクリックして残量を更新(例、多から少へ)にしたいです。
そのためにはcardをクリックした時にそのcardのドキュメントIDを取得しなければと思っています。
形としてはコードの86行目のようになるのではと思っているのですが、doc()の部分が分かりません。
v-forのとこのkeyを使うのかも？とも思ったのですが上手くできませんでした。
ご教示いただけると助かります。よろしくお願い致します。

発生している問題・エラーメッセージ

該当のソースコード

Nuxt
1<template>
2    <div>
3    <div v-on:click="openModal2" class="cards-container">
4         <card v-for="card in cards" :card="card" :key="card.id"/>
5    </div>
6    <div v-if="modalVisible" class="modal">
7        <div class="btns">
8            <div class="back-btn" @click="modalVisible = false">
9                <el-button type="primary" icon="el-icon-arrow-left">戻る</el-button>
10            </div>
11            <div class="post-btn" @click="post">
12                <el-button type="primary">登録<i class="el-icon-arrow-right el-icon-right"></i></el-button>
13            </div>
14        </div>
15        <div class="modal-content">
16            <el-input
17            class="spice-name"
18            type="text"
19            placeholder="名前：塩コショウ"
20            v-model="name"
21            >
22            </el-input><br>
23            <select v-model="selected" class="remaining">
24                <option disabled value="">残量を選択してください</option>
25                <option value="多">多</option>
26                <option value="中">中</option>
27                <option value="少">少</option>
28                <option value="なし">なし</option>
29            </select>
30            <span class="select-remaining">残量: {{ selected }}</span>
31        </div>
32    </div>
33    <div v-if="modalVisible2" class="modal-2">
34        <div class="btns2">
35            <div class="back-btn2" @click="modalVisible2 = false">
36                <el-button type="primary" icon="el-icon-arrow-left">戻る</el-button>
37            </div>
38            <div class="post-btn2" @click="update">
39                <el-button type="primary">更新<i class="el-icon-arrow-right el-icon-right"></i></el-button>
40            </div>
41        </div>
42        <p>残量の変更</p>
43        <select v-model="selected" class="remaining">
44                <option disabled value="">残量を選択してください</option>
45                <option value="多">多</option>
46                <option value="中">中</option>
47                <option value="少">少</option>
48                <option value="なし">なし</option>
49            </select>
50            <span class="select-remaining">残量: {{ selected }}</span>
51    </div>
52    </div>
53</template>
54
55<script>
56import Card from '~/components/Card.vue'
57import { db, firebase } from '~/plugins/firebase'
58
59export default {
60    components: {
61        Card
62    },
63    data() {
64        return {
65            cards: [],
66            name: null,
67            modalVisible: false,
68            modalVisible2: false,
69            selected: ""
70        }
71    },
72    methods: {
73        async post() {
74            await db.collection('posts').add({
75                name: this.name,
76                selected: this.selected,
77                createdAt: new Date().getTime()
78            })
79            this.modalVisible = false
80            this.name = null
81            this.selected = ""
82            window.alert('登録されました！')
83        },
84        async update() {
85            //下記のドキュメントIDの取得方法
86            await db.collection('posts').doc().update({
87                selected: this.selected
88            })
89            this.modalVisible2 = false
90            this.selected = ""
91            window.alert('更新されました！')
92        },
93        openModal() {
94            this.modalVisible = true
95        },
96        openModal2 () {
97            this.modalVisible2 = true
98        }
99    },
100    mounted () {
101        db.collection('posts').onSnapshot((snapshot) => {
102            snapshot.docChanges().forEach((change) => {
103                const doc = change.doc
104                if (change.type === 'added') {
105                    this.cards.push({ id: doc.id, ...doc.data()})
106                }
107                if (change.type === 'removed') { 
108                    this.cards.push({ id: doc.id, ...doc.data()})
109                }
110            })
111        })
112    }
113}
114</script>

試したこと

コードの86行目にドキュメントIDを直接指定入力すれば、更新はされるという動きの確認。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

hoshi-takanori

2020/04/09 19:35

this.cards.push({ id: doc.id, ...doc.data()}) で doc.id を card の id に入れてるので、それを指定すればいいのでは。

pa_so

2020/04/10 01:46

hoshi-takanoriさん、ありがとうございます。 doc('doc.id')と入力してやると、『No document to update: projects/spice-app-90444/databases/(default)/documents/posts/doc.id』というエラーが出てしまいます。

hoshi-takanori

2020/04/10 01:48

'doc.id' という文字列ではなく、doc オブジェクトの id 属性って意味ですけど…。

pa_so

2020/04/10 01:57

すいません分かってませんでした。確認してみます！ありがとうございます