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