Q&A
JavaScriptの学習を始めて1か月で、その一環としてvue.jsとFlickr APIを用いて写真を表示させるサイトの作成を行っています。
こちらのサイト（https://www.kabanoki.net/4320/）を参考にページネーションJavaScriptの学習を始めて1か月で、その一環としてvue.jsとFlickr APIを用いて写真を表示させるサイトの作成を行っています。
こちらのサイト（https://www.kabanoki.net/4320/）を参考にページネーションを実装しようと思い、サイトを参考にhtmlファイル、jsファイルに記述を行ったところ、サイトに表示していた写真一覧の下に
（https://gyazo.com/8f9911ce1f5652bee722acf1eb16f8ec）のように参考先サイトがそのまま表示され、載せている画像の「item-」が次のページに行ける状態となってしましました。
「vue.js pagination」で他サイトも調べてみたのですが、同様のコード記載方法の為、「< 1 2 ..3 4 >」のみを表示し、きちんと私がサイトで表示をしている写真をページで表示できるように方法がわからず、こちらでお伺いさせてもらえればと思います。
ページネーションでの実装部位と、flickrからの写真取得の箇所を連動させる必要性があるのだとも思うのですが、その方法がわからない為、宜しくお願い致します。
htmlとjsのコードを下記に載せさせてもらいます。
index.html
<body id="body"> <div id="app"> <h1>  your favorite cat</br> ~ 好きな猫ちゃん<i class="fas fa-cat"></i>の検索 ~</h1> <nav class="navbar navbar-expand-sm"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <form class="form-inline my-2 my-lg-0" v-on:submit.prevent="fetchImagesFromFlickr" > <input type="text" class="form-control mr-sm-2" v-model="searchText" placeholder="検索テキストを入力" aria-label="Search" > <button type="submit" class="btn btn-primary my-2 my-sm-0" > 検索 </button> </form> </div> </nav> <div id="body"> <div class="card"> <div class="card-header"> 気になる猫ちゃんの画像を探そう </div> <div class="card-body"> <p class="card-text">text</p> </div> </div> </div> <div class="container"> <div id="main"> <div class="gallery-item" v-for="photo in photos" v-bind:key="photo.id" v-bind:href="photo.pageURL" v-tooltip="photo.text" class="d-inline-block" target="_blank" > <img v-bind:src="photo.imageURL" v-bind:alt="photo.text" width="150" height="150" > </a> </div> </div> </div> <div id="pagination"> <ul> <li v-for="item in getItems"> {{ item }} </li> </ul> <paginate :page-count="getPageCount" :page-range="3" :margin-pages="2" :click-handler="clickCallback" :prev-text="'<'" :next-text="'>'" :container-class="'pagination'" :page-class="page-item"> </paginate> </div> </div> <footer> </footer> <!-- まずjQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Popper.js, 次に Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- その他のライブラリのJavaScript --> <script src="js/vendor/jquery.waypoints.min.js"></script> <script src="js/vendor/jquery.magnific-popup.min.js"></script> <script src="js/vendor/mobile-detect.min.js"></script> <!-- Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuejs-paginate@latest"></script> <script src="main.js"></script> <!-- Font Awesome --> <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> </body>
main.js
/** * -------------------- * Flickr API 関連の関数 * -------------------- */ // 検索テキストに応じたデータを取得するためのURLを作成して返す const getRequestURL = (searchText) => { const parameters = $.param({ method: 'flickr.photos.search', api_key: apiKey, tags: 'cat', text: searchText, // 検索テキスト sort: 'interestingness-desc', // 興味深さ順 per_page: 28, // 取得件数 page: 100, license: '4', // Creative Commons Attributionのみ extras: 'owner_name,license', // 追加で取得する情報 format: 'json', // レスポンスをJSON形式に nojsoncallback: 1, // レスポンスの先頭に関数呼び出しを含めない }); const url = `https://api.flickr.com/services/rest/?${parameters}`; return url; }; // photoオブジェクトから画像のURLを作成して返す const getFlickrImageURL = (photo, size) => { let url = `https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${ photo.secret }`; if (size) { // サイズ指定ありの場合 url += `_${size}`; } url += '.jpg'; return url; }; // photoオブジェクトからページのURLを作成して返す const getFlickrPageURL = photo => `https://www.flickr.com/photos/${photo.owner}/${photo.id}`; // photoオブジェクトからaltテキストを生成して返す const getFlickrText = (photo) => { let text = `"${photo.title}" by ${photo.ownername}`; if (photo.license === '4') { // Creative Commons Attribution（CC BY）ライセンス text += ' / CC BY'; } return text; }; /** * ---------------------------------- * Tooltipを表示するカスタムディレクティブ * ---------------------------------- */ Vue.directive('tooltip', { bind(el, binding) { $(el).tooltip({ title: binding.value, placement: 'bottom', }); }, unbind(el) { $(el).tooltip('dispose'); }, }); /** * ------------- * Pagination * ------------- */ var items = []; for (var i = 1; i <= 105; i++) { items.push('item-' + i); } Vue.component('paginate', VuejsPaginate) /** * ------------- * Vueインスタンス * ------------- */ new Vue({ el: '#app', data: { photo: 0, photos: [], searchText: '', items: items, parPage: 20, currentPage: 1 }, created() { const url = getRequestURL('cat'); $.getJSON(url, (data) => { console.log(data); if (data.stat !== 'ok') { return; } this.total = data.photos.total; this.photos = data.photos.photo.map(photo => ({ id: photo.id, imageURL: getFlickrImageURL(photo, 'q'), pageURL: getFlickrPageURL(photo), text: getFlickrText(photo), })); }); }, methods: { fetchImagesFromFlickr(event) { const searchText = this.searchText; const url = getRequestURL(searchText); $.getJSON(url, (data) => { console.log(data); if (data.stat !== 'ok') { return; } this.photos = data.photos.photo.map(photo => ({ id: photo.id, imageURL: getFlickrImageURL(photo, 'q'), pageURL: getFlickrPageURL(photo), text: getFlickrText(photo), })); }); }, clickCallback: function(pageNum) { this.currentPage = Number(pageNum); } }, computed: { getItems: function() { let current = this.currentPage * this.parPage; let start = current - this.parPage; return this.items.slice(start, current); }, getPageCount: function() { return Math.ceil(this.items.length / this.parPage); } } });
あなたの回答
tips
プレビュー
