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

Question

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

  def index
    @cnt = Array.all.sum(:cnt)
    respond_to do |f|
      f.any { render json: [ cnt: @cnt, }
    end
  end

  def create
    @test = Array.find(current_user.id)
    @test.update(array_params)
    head :created
  end

  private

  def　array_params
    params.fetch(:array, {}).permit(:cnt)
  end

<template>
   <span v-for="test in Array" v-bind:key="test.cnt">
   {{ test.cnt }}
    <p @click="Pluse()">
      カウントを増やす
    </p>
   </span>
</template>

<script>
import axios from 'axios'
import { csrfToken } from 'rails-ujs'
axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken()
export default {
  data() {
    return {
      Array:{}
    }
  },

  computed: {
    count() {
      return this.Array[0].cnt
    },
  },
    created: function() {
    this.Get().then(result => {
      this.Array = result.data
    })
   },
  methods: {
    modelSave: async function () {
      const res = await axios.post('/api/array', {array: this.Array})
      if (res.status !== 201) {
        process.exit()
      }
    },
    Pluse: async function () {
      this.Array[0].cnt ++
      this.modelSave().then(result => {
        this.Array = result.data
      })
    },
    Get: async function() {
      const res = await axios.get(` /api/array`)
      if (res.status !== 200) { process.exit() }
      return res
    },
  }
}

Answer 1

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

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

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

Comments

[moST]

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