質問編集履歴

1

誤字の修正

2020/09/17 13:08

投稿

sika
sika

スコア52

test CHANGED
File without changes
test CHANGED
@@ -8,11 +8,11 @@
8
8
 
9
9
  ②投稿アイテム一覧パーツ
10
10
 
11
- - バックエンドのDjangoからオブジェクトをVueインスタンスの`messages`に展開
11
+ - バックエンドのDjangoからオブジェクトをVueインスタンスの`messages`に展開
12
12
 
13
13
  - テンプレートタグで`messages`オブジェクトをループ
14
14
 
15
- - ループ中に投稿メッセージブロックの本文にのフォームに入力されているキーワードが含まれているか判定
15
+ - ループ中に投稿メッセージブロックの本文に検索フォームに入力されているキーワードが含まれているか判定
16
16
 
17
17
  - もしキーワードが含まれてる場合はブロックアイテム要素に装飾用の`pickup`classを付与
18
18
 
@@ -26,7 +26,9 @@
26
26
 
27
27
  上記のロジックで目視的な実装はできたのですが、
28
28
 
29
+ 投稿アイテムとして取り出しているのデータ数は10個程度なのにもかかわらず、その中から検索フォームでキーワード検索を行うと
30
+
29
- 最後のキーワード該当アイテム数の合計数(※)をコンソール確認すると回しているカウント数が900前後(投稿のデータ数は10個程度)までカウントされて以下のエラーとなります。
31
+ コメント部分(※)の最後のキーワード該当アイテム数の合計数処理のコンソール確認すると回しているカウント数が900前後までカウントされて以下のエラーとなります。
30
32
 
31
33
  ```
32
34
 
@@ -44,7 +46,7 @@
44
46
 
45
47
  ```html
46
48
 
47
- <!-- 検索フォーム -->
49
+ <!-- キーワード検索フォーム -->
48
50
 
49
51
  <div class="form-group form-inline w-50 mb-0">
50
52
 
@@ -54,9 +56,9 @@
54
56
 
55
57
 
56
58
 
57
- <!-- チャト履歴 -->
59
+ <!-- トークルームメセージ -->
58
-
60
+
59
- <div class="card-body" id="talk_wrap">
61
+ <div class="card-body" id="message_wrap">
60
62
 
61
63
  <p>検索結果:<span>[[ search_count ]]</span>件</p>
62
64
 
@@ -96,7 +98,7 @@
96
98
 
97
99
  return {
98
100
 
99
- messages: [],
101
+ messages: [], //
100
102
 
101
103
  search_count: 0,
102
104
 
@@ -112,19 +114,19 @@
112
114
 
113
115
  {# Djangoのクエリーセットオブジェクトを展開 #}
114
116
 
115
- {% for c in messages %}
117
+ {% for post in messages %}
116
118
 
117
119
  {
118
120
 
119
- "id": '{{ post.id }}',
121
+ "id": '{{ post.id }}', // 投稿ID
120
-
122
+
121
- "user": '{{ post.name }}',
123
+ "user": '{{ post.name }}', // ユーザー名
122
-
124
+
123
- "thumb": '{{ post.img_url }}',
125
+ "thumb": '{{ post.img_url }}', // ユーザーサムネ
124
-
126
+
125
- "text": '{{ post.message|linebreaksbr }}',
127
+ "text": '{{ post.message|linebreaksbr }}', // メッセージ本文
126
-
128
+
127
- "date": '{{ post.created_at }}',
129
+ "date": '{{ post.created_at }}', // 投稿日
128
130
 
129
131
  },
130
132