Vue-infinite-loading を使って DMM の商品を一覧で表示するページを作成しています。
単純に商品を無限スクロールで表示するページは Vue-infinite-loading の公式サイトにある Start With Hacker News を参考に作れました。
次に選択すると商品一覧の内容が変わるようにしたいです。
これも公式サイトの Use With Filter/Tabs に近いサンプルコードがありました。
下記が、Use With Filter/Tabs にあるサンプルコード(JSfiddle)になります。
<div id="app"> <header class="hacker-news-header"> <a target="_blank" href="http://www.ycombinator.com/"> <img src="https://news.ycombinator.com/y18.gif"> </a> <span>Hacker News</span> <select v-model="newsType" @change="changeType()"> <option value="story">Story</option> <option value="poll">Poll</option> <option value="show_hn">Show hn</option> <option value="ask_hn">Ask hn</option> <option value="front_page">Front page</option> </select> </header> <div class="hacker-news-item" v-for="(item, $index) in list" :key="$index" :data-num="$index + 1"> <a target="_blank" :href="item.url" v-text="item.title"></a> <p> <span v-text="item.points"></span> points by <a target="_blank" :href="`https://news.ycombinator.com/user?id=${item.author}`" v-text="item.author"></a> | <a target="_blank" :href="`https://news.ycombinator.com/item?id=${item.objectID}`" v-text="`${item.num_comments} comments`"></a> </p> </div> <infinite-loading :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading> </div>
const api = '//hn.algolia.com/api/v1/search_by_date'; new Vue({ el: '#app', data() { return { page: 1, list: [], newsType: 'story', infiniteId: +new Date(), }; }, methods: { infiniteHandler($state) { axios.get(api, { params: { page: this.page, tags: this.newsType, }, }).then(({ data }) => { if (data.hits.length) { this.page += 1; this.list.push(...data.hits); $state.loaded(); } else { $state.complete(); } }); }, changeType() { this.page = 1; this.list = []; this.infiniteId += 1; }, }, });
DMM の API を見ていただくとわかりますが、クエリストリングで表示する内容を細かく指定できます。
例えば、site=DMM.com
でDMMの商品を、site=FANZA
で FANZAの商品を指定できます。
さらに、フロアで floor=digital
で動画を、floor=monthly
で月額動画を指定できます。
そのため、セレクトボックスで指定すると複数(2つ以上)の値を渡したいです。
下記のような感じでカンマ区切りで記述して、split で受け取れば複数指定できるかなと考えました。
<select v-model="newsType" @change="changeType()"> <option value="DMM.com,digital">DMM.com(動画)</option> <option value="DMM.com,monthly">DMM.com(月額動画)</option> <option value="FANZA,digital">FANZA(動画)</option> <option value="FANZA,monthly">FANZA(月額動画)</option> </select>
ただ、vue 内の methods で複数値を受け取る方法がわかりません。
params
内に即時関数を記述して split で指定するのでしょうか?
methods: { infiniteHandler($state) { axios.get(api, { params: { page: this.page, tags: (function() { this.newsType })(); // そもそも即時関数が動きませんでした。記述の仕方に問題?そもそも即時関数が記述できない? }, }).then(({ data }) => { if (data.hits.length) { this.page += 1; this.list.push(...data.hits); $state.loaded(); } else { $state.complete(); } }); }, changeType() { this.page = 1; this.list = []; this.infiniteId += 1; }, }, });
根本的に split で値を受け取るという方法に誤りがあるかもしれませんが、Vue-infinite-loading で選択したときに複数の値を渡すにはどのようにすればよろしいでしょうか?
具体的なコードだと嬉しいですが、このような方法があるというアドバイスでも結構ですので教えてくださいm(__)m
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。