質問編集履歴

3

修正

2021/05/26 04:06

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -164,9 +164,11 @@
164
164
 
165
165
  List,
166
166
 
167
- },```ここに言語を入力
167
+ },
168
-
168
+
169
- コード
169
+ ```
170
+
171
+
170
172
 
171
173
  ```
172
174
 
@@ -276,6 +278,6 @@
276
278
 
277
279
 
278
280
 
279
- Web上からchromeのデバックツールにて表示されたものを試しに貼り付けて表示させたらCSSは機能しましたが
281
+ Web上からchromeのデバックツールにて表示されたものを試しに貼り付けて表示させたらCSSは適用されましたが
280
282
 
281
283
  cssが適用されたのみでページを押しても動かない状況です。。

2

追記2追加

2021/05/26 04:06

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -164,34 +164,38 @@
164
164
 
165
165
  List,
166
166
 
167
+ },```ここに言語を入力
168
+
169
+ コード
170
+
171
+ ```
172
+
173
+ created() {
174
+
175
+ firebase
176
+
177
+ .firestore()
178
+
179
+ .collection("posts")
180
+
181
+ .orderBy("time", "desc")
182
+
183
+ .get()
184
+
185
+ .then((snapshot) => {
186
+
187
+ snapshot.forEach((doc) => {
188
+
189
+ this.allData.push({ ...doc.data(), id: doc.id });
190
+
191
+ console.log(this.allData);
192
+
193
+ });
194
+
195
+ });
196
+
167
197
  },
168
198
 
169
- created() {
170
-
171
- firebase
172
-
173
- .firestore()
174
-
175
- .collection("posts")
176
-
177
- .orderBy("time", "desc")
178
-
179
- .get()
180
-
181
- .then((snapshot) => {
182
-
183
- snapshot.forEach((doc) => {
184
-
185
- this.allData.push({ ...doc.data(), id: doc.id });
186
-
187
- console.log(this.allData);
188
-
189
- });
190
-
191
- });
192
-
193
- },
194
-
195
199
  };
196
200
 
197
201
  </script>
@@ -209,3 +213,69 @@
209
213
 
210
214
 
211
215
  [【Vue】vueのページネーションライブラリ「vue-paginate」にてスタイルが適用されない](https://qiita.com/TMTN/questions/7b4ed8b741ce8ecb8a06)
216
+
217
+
218
+
219
+ #追記2
220
+
221
+
222
+
223
+ ```ここに言語を入力
224
+
225
+ <ul data-v-7c46b23c="" class="pagination paginate-links paginate-log">
226
+
227
+ <li class="left-arrow disabled"><a>«</a></li>
228
+
229
+ <li class="number active"><a>1</a></li>
230
+
231
+ <li class="number"><a>2</a></li>
232
+
233
+ <li class="number"><a>3</a></li>
234
+
235
+ <li class="right-arrow"><a>»</a></li>
236
+
237
+ </ul>
238
+
239
+ ```
240
+
241
+
242
+
243
+ ```ここに言語を入力
244
+
245
+ ul.paginate-links > li.left-arrow > a {
246
+
247
+ margin: 1rem;
248
+
249
+ }
250
+
251
+
252
+
253
+ ul.paginate-links > li.right-arrow > a {
254
+
255
+ margin: 1rem;
256
+
257
+ }
258
+
259
+
260
+
261
+ ul.paginate-links > li.number > a {
262
+
263
+ margin: 1rem;
264
+
265
+ }
266
+
267
+
268
+
269
+ ul.paginate-links > li.ellipses > a {
270
+
271
+ margin: 1rem;
272
+
273
+ }
274
+
275
+ ```
276
+
277
+
278
+
279
+ Web上からchromeのデバックツールにて表示されたものを試しに貼り付けて表示させたらCSSは機能しましたが
280
+
281
+ cssが適用されたのみでページを押しても動かない状況です。。

1

追記1追加

2021/05/26 04:04

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -197,3 +197,15 @@
197
197
  </script>
198
198
 
199
199
  ```
200
+
201
+
202
+
203
+ #追記1
204
+
205
+
206
+
207
+ 数日回答を得られなかった為、以下サイトにも掲載させて頂いております。
208
+
209
+
210
+
211
+ [【Vue】vueのページネーションライブラリ「vue-paginate」にてスタイルが適用されない](https://qiita.com/TMTN/questions/7b4ed8b741ce8ecb8a06)