質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

658閲覧

VueでCLIを使わずHTMLにcdnを読み込んでvue-infinite-loading.jsを使いたいです。

yuki1010

総合スコア43

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2019/09/04 04:30

編集2019/09/04 05:18

CLIを使わずVueアプリケーションを作っております。
vue-infinite-loadingを使い無限スクロール機能を実装をしたいと思っているのですが、うまくいきません。
vue-infinite-loading CDN

エラーの内容は、
InfiniteLoading is not definedとなり見つからないと怒られます。。。
初歩的なことでしら申し訳ありませんが、CDNで読み込む場合の方法をご教授ください。。。

コードは以下です。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<!-- 中略 --> 5 <script src="/static/vue/vue-infinite-loading.js"></script> 6 <script src="/static/vue/vue.js"></script> 7 <script src="/static/vue/scripts/home.js"></script> 8</head> 9<body> 10 11 <!-- 中略 --> 12 <div id="contents" class="home" v-cloak> 13 14 <infinite-loading 15 @infinite="infiniteHandler"> 16 <div slot="no-results"/> 17 </infinite-loading> 18 <ul> 19 <!-- 中略 --> 20 </ul> 21 </div> 22</body> 23</html>

js

1// static/vue/scripts/home.js 2new Vue({ 3 el: '#contents', 4 data: { 5 //中略 6 }, 7 components: { 8 'infinite-loading': VueInfiniteLoading, 9 //中略 10 mounted: function () { 11 //中略 12 }, 13 watch: { 14 }, 15 computed: { 16 }, 17 methods: { 18 //中略 19 infiniteHandler($state) { 20 const _this = this; 21 console.log("aaa"); 22 // if (self.todos.length >= this.page) { 23 // todos.slice(this.page,this.page+10).filter(function(item){ 24 // self.todos.push(item); 25 // return item; 26 // }); 27 // this.page += 10; 28 // $state.loaded(); 29 // } else { 30 // $state.complete(); 31 // } 32 }, 33 } 34});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<script src="https://raw.githubusercontent.com/PeachScript/vue-infinite-loading/master/dist/vue-infinite-loading.js></script>

公式

<script src="https://unpkg.com/vue-infinite-loading@^2/dist/vue-infinite-loading.js"></script>

を Vue 関連の <script> より上に読み込めば良いと思います。

また以下 head の中身の div は Vue 読み込みより下に書く必要があると思います。
Vue を読み込まないと infinite-loading は定義されないので。
(そもそも head 中には書かないはず?

<head> <!-- 中略 --> <div id="contents" class="home" v-cloak> <infinite-loading <!-- これらは Vue の中でしか使えない --> @infinite="infiniteHandler"> <div slot="no-results"/> </infinite-loading> <ul> <!-- 中略 --> </ul> </div>

投稿2019/09/04 04:36

編集2019/09/04 04:56
unhappychoice

総合スコア1531

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuki1010

2019/09/04 04:40

ご教授ありがとうございます。Vue関係の上部に書いたのですが、うまくいきませんでした。。
yuki1010

2019/09/04 04:45

componentsの読み込みやimportなど、生のjsでの書き方は間違っていないでしょうか?少し自信がありません。
yuki1010

2019/09/04 05:01

すいません。記載ミスをしておりました。(実際のコードも以下です。) headタグには書いていません。 bodyタグ内に、#contentsなどは書かれております。 bodyの閉じタグ上部にスクリプトも記載しております。 急いでいてteratailの方に書く際にミスをしてしまいました。、、、
unhappychoice

2019/09/04 05:07 編集

質問の方も正しい内容にしていただけるとありがたいですmm > また以下 head の中身の div は Vue 読み込みより下に書く必要があると思います。 ですかね? Vue 関連より下に <infinite-loading> がある必要があると思います
yuki1010

2019/09/04 05:20

unhappychoiceさんのご意見いただいた内容で、試してもだめでした。 質問の方も修正いたしました。誠にお手数をかけさせてしまい申し訳ありません。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問