Vue.jsのセレクトタグの選択値を配列としてaxiosのパラメーターに渡したいです。

Question

以下の処理を作成してます。
・１つめ目のセレクトボックスの値（tableSelected）を配列に格納
・上記の配列をaxios.getのパラメーターに渡す
・上記のパラメーターを持ってAPIにgetリクエストし、APIの結果として配列データを取得

その中でセレクトボックスの選択値（tableSelected）をAPI2のaxiosのパラメータとして配列で渡せず躓いています。
１つの選択値のパラメーターではうまく行ったのですが、配列での方法がうまく行きません。
配列の渡し方をご教授頂けると幸いです。よろしくお願いします。

現状は上のセレクトボックスの値を複数選択できているのですが、ご覧の通りAPI２にその値を渡せていません。
念のためpostmanで引数にtableName=clientA&tableName=clientBと配列で引数を渡してあげると理想の結果を返してくれているので、値が渡ってないと考えています。

１つ目のセレクトボックス選択時のtableSelectedの中身です。

<template>
    <div class="col-sm-3 col-form-label">
        <h2>請選擇客戶名字</h2>
        <v-select v-model="tableSelected" v-on:change="fetchTags(tableSelected)" :options="tables" multiple>
            <option v-for="table in tables" :key='table.id'>{{ table }}</option>
        </v-select>
        <h2>請選擇標籤</h2>
        <select v-model="tagSelected" class="browser-default custom-select custom-select-lg mb-3">
            <option v-for="tag in tags" :key='tag.id'>{{ tag }}</option>
        </select>
        <p>{{ tableSelected }}</p>

        <button type="button" class="btn btn-primary">確定</button>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      tables: '',
      tableSelected: [],
      tags: '',
      tagSelected: ''
    }
  },
  created () {
    axios.get('API1_url').then(response => {
      this.tables = response.data
    })
  },
  methods: {
    fetchTags: function (tableSelected) {
      axios.get('API2_url', {
        params: {
          tableName: tableSelected
        }
      }).then(response => {
        this.tags = response.data
      })
    }
  }
}
</script>

Comments

[plasticgrammer]

これだけだと値を渡せていないのか、API2_urlからのレスポンスが空なのかが判断できませんが、どこまで確認できていますでしょうか？

[amaturePy]

ありがとうございます。vue.jsに不慣れのため、問題の切り分けが甘く申し訳ありませんでした。
なんとかデバック機能などで探ってみます。
一応ではありますが、postmanで引数にtableName=clientA&tableName=clientBと渡してあげると理想の結果を返してくれているので、値が渡ってないと考えています。

[plasticgrammer]

とりあえず、API2_urlに引き渡しているtableSelectedや、戻りresponse.dataをconsole.logで出力させて、確認してみてもらえますか？

[amaturePy]

vue.jsのdevloperツールでtableSelectedの中身を確認いたしました。
上に写真を追加させて頂きました。
見た感じでは選択値が変数の中に入っているように思えます。

[plasticgrammer]

写真の通り、Vueのコンポーネント内には保持できているものと思っています。
前回のコメントは、1名回答しているかたの記載内容の通り、onchangeの引数とした場合に問題なく渡せているのかが気になったのでコメントしました。

[amaturePy]

なるほどですね！！
渡せてないですね・・・・
引き続き調査します！
ありがとうございます！

Answer 1

以下が参考になりそうですが、いかがでしょうか？
https://scrapbox.io/teamlab-frontend/Axios%E3%81%AEGET%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%81%A7%E9%85%8D%E5%88%97%E3%82%92%E9%80%81%E3%82%8B%E3%81%A8%E3%81%8D

追記

上記のサイトを参考に以下のように対応しました。
fetchTagsの引数ですが、dataで持っているため引数不要じゃないでしょうか？
this.tableSelectedで取得できます。

    fetchTags: function () {
      axios.get('API2_url', {
        params: {
          tableName: this.tableSelected
        },
        paramsSerializer: (params) => {
          return qs.stringify(params, { arrayFormat: 'repeat' });
        }
      }).then(response => {
        this.tags = response.data
      })
    }

結果として以下のようにクエリパラメータがセットされたのですが、いかがでしょうか？

<URL>?tableName=clientA&tableName=clientB

Comments

[amaturePy]

ありがとうございます。
今頂いた記事の方法を試しているのですが、配置する場所に問題があるのか未だ選択値を渡せてないので、引き続き試してみます。

[Twoshi]

ご確認いただきありがとうございます！
私の環境ではtableName=clientA&tableName=clientBとクエリパラメータがセットされるようになりました。
回答に追記しましたので、ご参考になれば幸いです。

[amaturePy]

ありがとうございます！
こちらでも試させて頂いたのですが、相変わらず下のセレクトボックスには何も表示されないです。

[amaturePy]

以下の警告がデベロッパーツールで出てるので、関係はないかもしれないですが、解決中です。
[Vue warn]: Property or method "errors" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

[Twoshi]

表示されない原因の切り分けは出来ていますでしょうか？
ソースを見る限り思いつく部分は以下になるかと思います。
・上記のソース反映でAPIへは理想のクエリパラメータでリクエスト出来てはいますか？
・レスポンスは理想としている情報ですか？
・レスポンスの情報をthis.tagsにそのまま代入されていますが、セレクトリストで表示するにあたり表示できる情報になっていますか？
・セレクトリストの作りは問題ありませんか？

上記エラーについては、errorsというメソッドもしくはプロパティで出ていると思われます。
ご質問内容にはerrorsというメソッド、プロパティは無いため、今回の内容とは関係ないように思われます。

[amaturePy]

今ひとつづつ切り分けて確認しております。
上記エラーはエラー処理を加えた際にでたもので他のエラー内容を見ていると
Invalid prop: type check failed for prop "options". Expected Array, got String with value ""
とoptionsのデータ型が配列ではなく文字列とエラーが来ているので、確認中です。

[amaturePy]

https://stackoverflow.com/questions/59579104/why-invalid-prop-type-check-failed-for-prop-value-expected-string-number-o
こちらの記事で対応してます。

[amaturePy]

未だ実装できずですが、頂いた記事も参考になりました。
おかげさまで当初より実装に近づいている気がします。
ありがとうございました。
より問題を細分化し状況も変わっており、複雑化させてしまうので
一旦今回の質問はここで切らせて頂いて、再度、何かある場合は別の質問として上げさせていただきます。

[Twoshi]

承知しました！
実装完了とまでは至りませんでしたが、少しでも実装の助けとなれているのであれば幸いです。

[amaturePy]

無事解決致しましたので、ご報告します。
v-selectタグ内のv-on:change="fetchTags()"を:on-change="fetchTags()"に変更することで解決致しました。ありがとうございました。
以下参考URLです。
https://github.com/sagalbot/vue-select/issues/545

[Twoshi]

ご連絡いただきありがとうございます！
承知しました！
無事に解決されよかったです。^^