Vue-infinite-loading で複数の値を API に渡す方法を教えてください。

Question

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

Answer 1

できました。
JSFilerが公式サイトのベースコードになりますが、select ボックスの箇所を button にして v-on:click で changeType を指定して、引数で値を渡しました。

        <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>

ベースコードにあるセレクトボックスを下記のようにボタンに変更。

        <button @click="changeType('story','one')">Story</button>
        <button @click="changeType('poll','two')">poll</button>
        <button @click="changeType('show_hn','three')">show_hn</button>
        <button @click="changeType('ask_hn','four')">ask_hn</button>
        <button @click="changeType('front_page','five')">front_page</button>

data に newQuery を新たに追加しておき、 changeType で値を代入することで、複数の値を受け取ることができました。

下記には記載していませんが、 axios の parms 内で sample: this.newQuery のように記述すればAPIで複数の値を指定して、リクエストできます。

<script>
    const api = '//hn.algolia.com/api/v1/search_by_date';

    new Vue({
        el: '#app',
        data() {
            return {
                page: 1,
                list: [],
                newsType: 'story',
                newQuery: 'querystring',
                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(newsType,newQuery) {
                this.page = 1;
                this.list = [];
                this.infiniteId += 1;
                this.newsType = newsType;
                this.newQuery = newQuery;
                alert(this.newsType + this.newQuery);
            },
        },
    });

</script>