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

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

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

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

Q&A

解決済

1回答

1162閲覧

Vue側で送信した配列(JSON)の値をストロングパラメーターしようとするとNoMethodErrorエラーになる。

moST

総合スコア14

Vue.js

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

0グッド

0クリップ

投稿2020/11/10 16:06

編集2020/11/11 18:09

RailsのAPIで、Vue側から値の変更をPOST送信するやり方がわかりません。
GetリクエストでJson形式のデータを取ってきて配列に代入し、表示する方法はわかりました。
Vue側での値の変更をRailsのモデルに反映するPostリクエストはどのようにすればよいでしょうか?
今回は、ボタンを押すと値が1つ増える仕組みで試験しています。

11/12追記(タイトル変更)
byebugで確認したところ、paramsとparams.fetchの値は入っていましたが、permitでエラーになっています。
paramsとparams.fetchの値は以下の通りです。

paramsの結果

<ActionController::Parameters {"array"=>[{"cnt"=>"51"}], "controller"=pi/array", "action"=>"create"} permitted: false>

params.fetch(:array, {})の結果

[<ActionController::Parameters {"cnt"=>"51"} permitted: false>]

params.fetch(:array, {}).permit(:cnt)の結果

*** NoMethodError Exception: undefined method `permit' for #<Array:0x00007ff8350162d0> nil

APIcontroller

1 def index 2 @cnt = Array.all.sum(:cnt) 3 respond_to do |f| 4 f.any { render json: [ cnt: @cnt, } 5 end 6 end 7 8 def create 9 @test = Array.find(current_user.id) 10 @test.update(array_params) 11 head :created 12 end 13 14 private 15 16 def array_params 17 params.fetch(:array, {}).permit(:cnt) 18 end

Vue

1<template> 2 <span v-for="test in Array" v-bind:key="test.cnt"> 3 {{ test.cnt }} 4 <p @click="Pluse()"> 5 カウントを増やす 6 </p> 7 </span> 8</template> 9 10<script> 11import axios from 'axios' 12import { csrfToken } from 'rails-ujs' 13axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken() 14export default { 15 data() { 16 return { 17 Array:{} 18 } 19 }, 20 21 computed: { 22 count() { 23 return this.Array[0].cnt 24 }, 25 }, 26 created: function() { 27 this.Get().then(result => { 28 this.Array = result.data 29 }) 30 }, 31 methods: { 32 modelSave: async function () { 33 const res = await axios.post('/api/array', {array: this.Array}) 34 if (res.status !== 201) { 35 process.exit() 36 } 37 }, 38 Pluse: async function () { 39 this.Array[0].cnt ++ 40 this.modelSave().then(result => { 41 this.Array = result.data 42 }) 43 }, 44 Get: async function() { 45 const res = await axios.get(` /api/array`) 46 if (res.status !== 200) { process.exit() } 47 return res 48 }, 49 } 50}

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

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

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

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

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

guest

回答1

0

ベストアンサー

Vueから送信するデータの形式によって変わります。
データの形式は任意です。

{ array => [{:cnt => 1}] } の場合は
params.permit(:array => [:cnt]).require(:array)[0]
=> {"cnt"=>1}

私なら単に
{ count: 3 } というデータを送り
params.permit(:count) とします

投稿2020/11/17 05:35

neko_daisuki

総合スコア2090

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

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

moST

2020/11/21 17:42

返事遅れてすみません。。ありがとうございます!無事解決しました。とても助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問