前提・実現したいこと
Rails側で楽天APIを叩くメソッドを作成しており、APIを叩くのに必要なパラメータに、
Vue側で作成したフォームに入力した値を受け渡したいのですが、上手く渡せません。
追加修正等、お分かりになる方、ご教示いただけませんでしょうか。
発生している問題・エラーメッセージ
undefined method `[]' for nil:NilClass > keyword: params[:keyword],
該当のソースコード
rakuten_searches_controller.rb
ruby
1class Api::V1::RakutenSearchesController < ApplicationController 2 require 'httpclient' 3 4 def index 5 url = "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706" 6 params = { 7 applicationId: ENV['RAKUTEN_API_APPLICATION_ID'], 8 keyword: params[:keyword], 9 } 10 client = HTTPClient.new 11 response = client.get(url, params) 12 render json: JSON.parse(response.body) 13 end 14end 15
store.js
javascript
1function searchItem(keyword) { 2 return axios.get("/v1/rakuten_searches", { 3 params: { 4 keyword: keyword, 5 }, 6 }); 7} 8 9 search({ commit, state }) { 10 searchItem( 11 state.keyword, 12 ).then((data) => { 13 commit("search", data); 14 }); 15 },
api_call.vue
vue
1<template> 2 <b-field> 3 <input class="text" type="text"/> 4 <input class="submit" type="submit" value="検索" @click="search()" /> 5 </b-field> 6</template> 7 8<script> 9import { mapActions } from "vuex"; 10export default { 11methods: { 12 ...mapActions( 13 "search", 14 ), 15 }, 16}; 17</script>
試したこと
デェベロッパーツールのメットワークタブで確認したところ、「検索(submit)」を押した後のリクエストは下記のようでした。
keyword
を送るのはできているのと思いますが、受け取る側(Rails)に不備があるのでは?と考えています。
rakuten_searches?keyword=%E7%B5%90%E5%A9%9A
アドバイスいただけますと幸いです。よろしくお願いいたします。
あなたの回答
tips
プレビュー