質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

0回答

911閲覧

Vueで作成されたフォームに入力した値を、Railsのparamsに渡したい

nomu_lui

総合スコア11

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2021/01/17 06:17

前提・実現したいこと

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

アドバイスいただけますと幸いです。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問