質問編集履歴
1
誤字の修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -8,11 +8,11 @@
|
|
8
8
|
|
9
9
|
②投稿アイテム一覧パーツ
|
10
10
|
|
11
|
-
- バックエンドのDjangoからオブジェクトを
|
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
|
-
最後のキーワード該当アイテム数の合計数
|
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="
|
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
|
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
|
|