teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

修正

2019/09/04 04:56

投稿

unhappychoice
unhappychoice

スコア1531

answer CHANGED
@@ -8,7 +8,9 @@
8
8
  ```
9
9
  を Vue 関連の <script> より上に読み込めば良いと思います。
10
10
 
11
- また以下 `head` の中身の `div` は Vue コンポーネント中に書く必要があると思います。
11
+ また以下 `head` の中身の `div` は Vue 読み込みより下に書く必要があると思います。
12
+ Vue を読み込まないと infinite-loading は定義されないので。
13
+ (そもそも head 中には書かないはず?
12
14
 
13
15
  ```
14
16
  <head>

3

詳細に

2019/09/04 04:56

投稿

unhappychoice
unhappychoice

スコア1531

answer CHANGED
@@ -8,7 +8,7 @@
8
8
  ```
9
9
  を Vue 関連の <script> より上に読み込めば良いと思います。
10
10
 
11
- また以下は Vue コンポーネント中に書く必要があると思います。
11
+ また以下 `head` の中身の `div` は Vue コンポーネント中に書く必要があると思います。
12
12
 
13
13
  ```
14
14
  <head>

2

追記

2019/09/04 04:50

投稿

unhappychoice
unhappychoice

スコア1531

answer CHANGED
@@ -6,4 +6,21 @@
6
6
  <script src="https://unpkg.com/vue-infinite-loading@^2/dist/vue-infinite-loading.js"></script>
7
7
 
8
8
  ```
9
- を Vue 関連の <script> より上に読み込めば良いと思います。
9
+ を Vue 関連の <script> より上に読み込めば良いと思います。
10
+
11
+ また以下は Vue コンポーネント中に書く必要があると思います。
12
+
13
+ ```
14
+ <head>
15
+ <!-- 中略 -->
16
+ <div id="contents" class="home" v-cloak>
17
+
18
+ <infinite-loading <!-- これらは Vue の中でしか使えない -->
19
+ @infinite="infiniteHandler">
20
+ <div slot="no-results"/>
21
+ </infinite-loading>
22
+ <ul>
23
+ <!-- 中略 -->
24
+ </ul>
25
+ </div>
26
+ ```

1

URL変更

2019/09/04 04:49

投稿

unhappychoice
unhappychoice

スコア1531

answer CHANGED
@@ -1,5 +1,9 @@
1
+ ~~<script src="https://raw.githubusercontent.com/PeachScript/vue-infinite-loading/master/dist/vue-infinite-loading.js></script>~~
2
+
3
+ [公式](https://peachscript.github.io/vue-infinite-loading/guide/#installation)
4
+
1
5
  ```
2
- <script src="https://raw.githubusercontent.com/PeachScript/vue-infinite-loading/master/dist/vue-infinite-loading.js></script>
6
+ <script src="https://unpkg.com/vue-infinite-loading@^2/dist/vue-infinite-loading.js"></script>
7
+
3
8
  ```
4
-
5
9
  を Vue 関連の <script> より上に読み込めば良いと思います。