回答編集履歴
3
修正
test
CHANGED
|
@@ -36,6 +36,12 @@
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
39
|
+
//↓このchatは、dataにあるthis.chatです。
|
|
40
|
+
|
|
41
|
+
//this.chatには幾つかのメッセージがあるはずなので、それをitemに代入しています。
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
39
45
|
<div v-for="(item ,index) in chat" :key=index>
|
|
40
46
|
|
|
41
47
|
<div @click.right.prevent="deleteMessage(item.key)" class="mymessage">
|
|
@@ -50,7 +56,7 @@
|
|
|
50
56
|
|
|
51
57
|
|
|
52
58
|
|
|
53
|
-
こうすることで、deleteMessage(key)のkeyは、それぞれのメッセージ固有のkeyが渡されますので、
|
|
59
|
+
こうすることで、deleteMessage(key)のkeyには、それぞれのメッセージ固有のkeyが渡されていますので、
|
|
54
60
|
|
|
55
61
|
refにpath入ります。
|
|
56
62
|
|
2
追記
test
CHANGED
|
@@ -1,3 +1,99 @@
|
|
|
1
|
+
追記ありがとうございます！
|
|
2
|
+
|
|
3
|
+
やはりkeyでしたね。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
そのままdeleteMessage(key)としてもエラーになると思います。
|
|
8
|
+
|
|
9
|
+
```vue
|
|
10
|
+
|
|
11
|
+
<div @click.right.prevent="deleteMessage" class="mymessage">
|
|
12
|
+
|
|
13
|
+
<nl2br tag="div" :text="message" />
|
|
14
|
+
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
ここはvueのhtml側の nl2br はコンポーネントを呼び出してると思うのですが、
|
|
20
|
+
|
|
21
|
+
今のままだと、divの@clickイベントと nl2brが連動してないです。
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
このあたりを見ていただいて、連動させるか、
|
|
28
|
+
|
|
29
|
+
[v-slotの解説](https://future-architect.github.io/articles/20200428/)
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
コンポーネントで呼ぶのではなく、dataの中のchatをv-forで表示するといった方法もありです。
|
|
34
|
+
|
|
35
|
+
```vue
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
<div v-for="(item ,index) in chat" :key=index>
|
|
40
|
+
|
|
41
|
+
<div @click.right.prevent="deleteMessage(item.key)" class="mymessage">
|
|
42
|
+
|
|
43
|
+
{{item.message}}
|
|
44
|
+
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
こうすることで、deleteMessage(key)のkeyは、それぞれのメッセージ固有のkeyが渡されますので、
|
|
54
|
+
|
|
55
|
+
refにpath入ります。
|
|
56
|
+
|
|
57
|
+
※実際には、親のkeyも 必要になるとは思いますが。
|
|
58
|
+
|
|
59
|
+
```vue
|
|
60
|
+
|
|
61
|
+
deleteMessage(key) {
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
var path = "V5S2...." +key //親のKey ＋当該メッセージのkey
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
firebase
|
|
70
|
+
|
|
71
|
+
.database()
|
|
72
|
+
|
|
73
|
+
.ref(path)
|
|
74
|
+
|
|
75
|
+
//・・・・
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
もし、言っている内容がちょっと難しいと感じるようでしたら、先にvueでいくつかサイトを作ってみてもいいと思います！
|
|
82
|
+
|
|
83
|
+
今作っている内容はまあまあ中級なので、vueの理解が無いとこの先辛くなってくると思います。
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
これは余談ですが、vueのレイアウトは(htmlとCSS)、vuetifyを導入するとかなり楽になりますよ。
|
|
88
|
+
|
|
89
|
+
CSSを書くことがすごく減ります。
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
1
97
|
すみません、databaseを試せるものがないので、想像でのお答えになってしまいますが。。。
|
|
2
98
|
|
|
3
99
|
|
1
追記
test
CHANGED
|
@@ -1,3 +1,69 @@
|
|
|
1
|
+
すみません、databaseを試せるものがないので、想像でのお答えになってしまいますが。。。
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
これは、DBに値が追加された時に呼び出される関数ですか？
|
|
6
|
+
|
|
7
|
+
この、key: snap.key,はrefのkeyじゃないのでしょうか？
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
取得したきた値全てを一度console.logか何かでチェックしてみるとrefと同じ値が見つかりますので、
|
|
12
|
+
|
|
13
|
+
それをchat等の変数に入れておき、deleteMessageの引数として渡せば、デリートの際にrefが指定できると思います。
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
[removeのリファレンス](https://firebase.google.com/docs/reference/js/firebase.database.Reference?hl=ja#remove)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
```vue
|
|
24
|
+
|
|
25
|
+
childAdded(snap) {
|
|
26
|
+
|
|
27
|
+
//snapshotとは、ある時点における特定のデータベース参照にあるデータの全体像を写し取ったもの
|
|
28
|
+
|
|
29
|
+
//childAdded：データベースからアイテムのリストを取得する関数
|
|
30
|
+
|
|
31
|
+
// 受け取ったメッセージをchatに追加
|
|
32
|
+
|
|
33
|
+
const message = snap.val();
|
|
34
|
+
|
|
35
|
+
//イベントのときにデータベース内の「message」データを取得。
|
|
36
|
+
|
|
37
|
+
// データベースに新しい要素が追加されると随時呼び出される
|
|
38
|
+
|
|
39
|
+
this.chat.push({
|
|
40
|
+
|
|
41
|
+
key: snap.key,
|
|
42
|
+
|
|
43
|
+
name: message.name,
|
|
44
|
+
|
|
45
|
+
image: message.image,
|
|
46
|
+
|
|
47
|
+
message: message.message,
|
|
48
|
+
|
|
49
|
+
userid: message.userid,
|
|
50
|
+
|
|
51
|
+
time: message.time,
|
|
52
|
+
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
this.scrollBottom();
|
|
56
|
+
|
|
57
|
+
//スクロールの一番下に追加。
|
|
58
|
+
|
|
59
|
+
},
|
|
60
|
+
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
1
67
|
もっぱらfirestoreなので、少々勝手が違うのですが、
|
|
2
68
|
|
|
3
69
|
|