キーで識別して、Firestoreに登録したい

Java
1<template>
2    <v-app id="app">
3        <div class="text-center">
4            <v-row justify="center">
5                <v-col>
6                        <v-btn
7                            block
8                            x-large
9                            color="primary"
10                            dark
11                            @click="dialogSwitch('A')"
12                        >
13                            店舗A
14                        </v-btn>
15                        <br>
16                        <v-btn
17                            block
18                            x-large
19                            color="primary"
20                            dark
21                            @click="dialogSwitch('B')"
22                        >
23                            店舗B
24                        </v-btn>
25                        <br>
26                        <v-btn
27                            block
28                            x-large
29                            color="primary"
30                            dark
31                            @click="dialogSwitch('C')"
32                        >
33                            店舗C
34                        </v-btn>
35                <v-dialog v-model="dialog" persistent max-width="600 px">
36                    <v-card>
37                    <v-card-title>
38                        <span class="headline">納品・回収数</span>
39                    </v-card-title>
40                    <v-card-text>
41                    <v-container>
42                        <v-row>
43                            <v-col
44                               cols="12"
45                               sm="6"
46                               v-for='(item,key) in inputDeli' :key=key
47                            >
48                                <v-text-field
49                                    :label=item.label
50                                    v-model=item.count
51                                ></v-text-field>
52                            </v-col>
53                            <v-col
54                               cols="12"
55                               sm="6"
56                               v-for='(item,key) in inputPick' :key=key
57                            >
58                                <v-text-field
59                                    :label=item.label
60                                    v-model=item.number
61                                ></v-text-field>
62                            </v-col>
63                        </v-row>
64                    </v-container>
65                    </v-card-text>
66                    <v-card-actions>
67                        <v-spacer></v-spacer>
68                        <v-btn color="blue darken-1" text @click="dialog = false">Close</v-btn>
69                        <v-btn color="blue darken-1" text @click="submit">Save</v-btn>
70                        <!-- <v-btn color="blue darken-1" text @click="conf">確認</v-btn> -->
71                    </v-card-actions>
72                    </v-card>
73                </v-dialog>
74                </v-col>
75            </v-row>
76        </div>
77    </v-app>
78</template>
79
80<script>
81  import firebase from "../plugins/firebase"
82  var today = new Date();
83  console.log(today.getFullYear() + "/" + (today.getMonth() + 1) + "/" +today.getDate());
84  var todayDate = today.getFullYear() + "/" + (today.getMonth() + 1) + "/" +today.getDate()
85
86  export default {
87    data () {
88      return {
89        dialog: false,
90        //納品の連想配列
91        inputDeli: {
92        blueDeli:{ label: "青納品数", count: 0 },
93        orangeDeli:{ label: "オレンジ納品数", count: 0 },
94        redDeli:{ label: "赤納品数", count: 0 },
95        greenDeli:{ label: "緑納品数", count: 0 },
96        },
97        //回収の連想配列
98        inputPick: {
99        bluePick:{ label: "青回収数", number: 0 },
100        otherPick:{ label: "その他回収数", number: 0 },
101        },
102      }
103    },
104    methods: {
105        dialogSwitch (shopName) {
106            this.dialog= true
107        },
108        async submit () {
109            //deliValues宣言
110            var deliValues = {blue: this.inputDeli.blueDeli.count, orange: this.inputDeli.orangeDeli.count, red: this.inputDeli.redDeli.count, green: this.inputDeli.greenDeli.count}
111            console.log(deliValues)
112
113            //pickValues宣言
114            var pickValues = {blue: this.inputPick.bluePick.number, other: this.inputPick.otherPick.number}
115            console.log(pickValues)
116
117            var shopList = {}
118
119            const db = firebase.firestore()
120            let dbDeliverys = await db.collection('deliverys').doc('ドキュメントID')
121             .update({
122                 distribute: deliValues,
123                 date: todayDate,
124                 pickups: pickValues,
125             })
126             .then(()=>{ return true }).catch(function (err) {
127                console.log(err)
128                return false
129
130            });
131            if (dbDeliverys){alert("更新完了")}else {alert("更新失敗")}
132        },
133        async conf () {
134            const db = firebase.firestore()
135
136            const querySnapshot = await db.collection('deliverys').where("id", "==", "ドキュメントID").get()
137            querySnapshot.forEach((doc) => {
138                var id = doc["shopId"]
139
140                if(this.deliverys[shopId] != undefined) {
141                    this.deliverys[shopId] = doc
142                }
143
144                console.log(id)
145                console.log(doc.id)
146                console.log(doc.data().deliverys)
147                var deliverysNumber = doc.data().deliverys
148                for(var key in this.input){
149                    this.input[key].count = deliverysNumber[key]
150                }
151            })
152        },    
153    },
154    mounted(){
155        this.conf()
156    }
157}
158</script>

納品数などを管理するwebアプリを作っています。

例えば、店舗A,B,Cの３店舗分のデータベースをFirestore上に作って
web上でどの店舗か選ぶボタン(@click)を押したときに、
@clickによって得られた引数（店舗IDや店舗名）によって、
A ,B,Cどの店舗か見分けて納品数などを格納したいです。

その方法がわからないので、助言いただけると助かります。

よろしくお願い致します。

行動規範の内容に同意します

回答1件

この説明だけだとどこまで理解されてるか分からないので、何も実装方法が思いつかないものと仮定して、方針の説明のみします。

まず、
0. 番号リスト店舗用の配列を作る

js
1const stores = {
2  "A": StoreAのオブジェクト,
3  "B": StoreBのオブジェクト,
4  "C": StoreBのオブジェクト,
5}

これを、ソースコードの上か、Vueのプロパティとして定義しておいてください。一旦仮の店リストを作れば良いです。
オブジェクトは、jsのオブジェクトです。連想配列のようなものです。調べてください。

クリック時に、メソッドを呼び出し、A,B,Cのどれをクリックしたかを取り出すし、上記のstoresのキーとして指定する。

js
1dialogSwitch(shopName) {
2   let store = stores(shopName)
3   console.log(store, "store")
4}

まずここまでやって、選択した店情報が見れるか試してください。
ちなみに、サーバサイドで取り出すのか、フロントで取り出すのかも分からないため、フロントで取り出すと仮定して書いてますが、そこはご自身の仕様に合わせて対応してください。

これでも何一つ全く分からないようなら、そもそもプログラミングの基礎構文の知識が欠如していると思うので、dotinstallなどの教材で、jsを学んでください。

投稿2021/04/08 10:36

編集2021/04/08 13:30

riyo

総合スコア33

ryudaiii

2021/04/09 03:04

ご回答いただきありがとうございます。 jsのオブジェクトは、 "A" : { ShopName : A }のような形であっていますでしょうか？？

ryudaiii

2021/04/09 05:02 編集

const stores = { 'A' : shopName, 'B' : shopName, } dialogSwitch (shopName) { this.dialog= true let store = stores(shopName) console.log(store, "store") }, と記述したところ、TypeError: stores is not a function at VueComponent.dialogSwitch というエラーが出ました。一通りネットで調べて、直してみたのですが改善されませんでした。もしよろしければ、原因をご教示いただきたいです。よろしくお願い致します。

行動規範の内容に同意します