【Vue】v-selectで選んだ値をstoreのactionの引数に渡したい

Question

前提・実現したいこと

フロントをVueで実装しており、「入力したキーワード」と「画面上で選んだジャンルの選択肢」の2つを、
storeのactionの引数に渡したいです。
また、actionでRails側で設定したAPIを叩きたいです。

お手数ですが、修正箇所等、ご教示いただけますと幸いです。

発生している問題・エラーメッセージ

エラーは出ていませんが、下記のように検索すると、リクエストURLにgenreIdが空の状態となってしまっています。
現状のコードで、キーワードは「タオル」でちゃんと値を渡せており、「タオル」のみに該当するレスポンスが返ってきております。

http://localhost:3000/api/v1/rakuten_searches/search?keyword=%E3%82%BF%E3%82%AA%E3%83%AB&genreId=

該当のソースコード

Vueのフォームを構成するコンポーネント

<template>
  <div>
    <b-field>
      <input class="text" type="text" placeholder="キーワードを入力する" @change="CHANGE_KEYWORD($event.target.value)" />
      <v-select multiple label="name" :options="genreIds" @change="CHANGE_GENRE_ID(genreIds.genreId, $event)"></v-select>
      <input class="submit" type="submit" value="検索" @click="SEARCH" />
    </b-field>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { CHANGE_KEYWORD, CHANGE_GENRE_ID, SEARCH } from '../../../store/mutation-types'
export default {
  name: 'RakutenApiCall',
  data() {
    return {
      genreIds: [
        { genreId: 100433, name: 'ルームウェア' },
        { genreId: 562637, name: '家電' },
        { genreId: 510915, name: '洋酒' },
        { genreId: 100804, name: 'インテリア' },
        { genreId: 215783, name: '日用品雑貨' },
        { genreId: 558944, name: 'キッチン用品・食器' },
        { genreId: 100005, name: '花' },
        { genreId: 566732, name: 'カタログ' },
        { genreId: 553283, name: 'ギフト券・商品券' },
      ],
      genreId: ''
    }
  },
  methods: {
    ...mapActions([
      CHANGE_KEYWORD, SEARCH, CHANGE_GENRE_ID
    ])
  }
}
</script>

<style scope>

</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from '../plugins/axios'
import {
  CHANGE_KEYWORD,
  SEARCH,
  CHANGE_GENRE_ID,
} from './mutation-types'

Vue.use(Vuex)

const state = {
  keyword: '',
  genreId: '',
  items: []
}

const getters = {
  items: state => state.items
}

const mutations = {
  [CHANGE_KEYWORD] (state, keyword) {
    state.keyword = keyword
  },
  [CHANGE_GENRE_ID] (state, genreId) {
    state.genreId = genreId
  },
  [SEARCH] (state, items) {
    state.items = items.data
  }
}

function searchItem(keyword, genreId) {
  return axios.get('/v1/rakuten_searches/search', {
    params: {
      keyword: keyword,
      genreId: genreId,
    }
  })
}

const actions = {
  [CHANGE_KEYWORD] ({ commit }, keyword) {
    commit(CHANGE_KEYWORD, keyword)
  },

  [CHANGE_GENRE_ID] ({ commit }, genreId) {
    commit(CHANGE_GENRE_ID, genreId)
  },

  [SEARCH] ({ commit, state }) {
    searchItem(state.keyword, state.genreId)
      .then(data => {
        commit(SEARCH, data)
    })
  }
}

export default new Vuex.Store({
  namespaced: true,
  state,
  getters,
  mutations,
  actions
})

mutation-types.js

export const CHANGE_KEYWORD = 'CHANGE_KEYWORD'
export const CHANGE_GENRE_ID = 'CHANGE_GENRE_ID'
export const SEARCH = 'SEARCH'

試したこと

searchItem(keyword, genreId)

と

  [SEARCH] ({ commit, state }) {
    searchItem(state.keyword, state.genreId)
      .then(data => {
        commit(SEARCH, data)
    })
  }

の2つの引数の書き方が間違っているかと予想しています。
配列を渡すためにsearchItem([{keyword}, {genreId}])としてみましたが、
これだと500番エラーが返ってきました。

plasticgrammer様へのご返信

上記のようにselectedには、Objectに値が入っていますが、下記のようにsearchの時点では格納されていないので、ここで上手く受け渡せていないということでしょうか？

Comments

[plasticgrammer]

＠changeに記載している「genreIds.genreId」というコードで、引き渡しはうまく行っているのでしょうか？
自分で試していないのでなんとも言えませんが、このコードでよいのか気になりましたので確認まで。

[nomu_lui]

plasticgrammer様
上記に画像付きで追加いたしました。選択を選んで、検索ボタンを押した後の画像になります。
`search`のときのクリックイベントで何も格納されていなかったら、この時点の受け渡しが上手くいっていなく、そもそもstore内のメソッドまで値が行き渡ってないという理解で合っていますでしょうか？

[plasticgrammer]

イベントハンドラで独自関数に引き渡している値なので、追加いただいたツール画面上では確認できないかと思います。
とりあえずコンソール出力などの手段で確認してみてください。

[nomu_lui]

v-selectを使うと普通のselectを使った時と別の動きをするようでしたので、今回はシンプルにselectを使って実装しました。

ご対応いただきありがとうございました！

Answer 1

v-selectではなく、普通のselectとoptionを使って実装しました。