Home>

I don't know how to POST the value change from Vue side in Rails API.
I understand how to get Json format data with Get request, assign it to an array, and display it.
How can I make a Post request that reflects the value change on the Vue side in the Rails model?
This time, we are testing with a mechanism that increases the value by 1 when the button is pressed.

11/12 postscript (title change)
When I checked with byebug, the values ​​of params and params.fetch were included, but I got an error in permit.
The values ​​of params and params.fetch are as follows.

Result of params

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

Result of params.fetch (: array, {})

[ "51"} permitted: false>]


Result of params.fetch (: array, {}). permit (: cnt)

*** NoMethodError Exception: undefined method `permit'for # 
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 ()">
      Increase the count
  </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

    It depends on the format of the data you send from Vue.
    The format of the data is arbitrary.

    In the case of {array =>[{: cnt =>1}]}
    params.permit (: array =>[: cnt]). require (: array) [0]
    =>{"cnt" =>1}

    I just
    Send the data {count: 3}
    params.permit (: count)will do