Nuxt.js에서 Rails로 전송된 데이터를 저장하고 싶다.

Nuxt.js에서 Rails로 전송된 데이터를 저장하고 싶다.

내가 이루고 싶은 것

Nuxt.js에서 Rails로 보낸 데이터를 저장하고 싶습니다.Rails가 accepts_nested_attributes_for를 사용하여 관련지어 데이터를 저장하려고 합니다.

코드

레일
모델/포스트.인쇄

class Post < ApplicationRecord
    has_many :post_items, dependent: :destroy
    accepts_nested_attributes_for :post_items, allow_destroy: true

    validates :title, presence: true
    validates :author, presence: true
    validates :image, presence: true
end

model/post_item.model

class PostItem < ApplicationRecord
 belong_to :post
end

앱/컨트롤러/controller_controller

class Api::V1::PostsController < ApplicationController
    def index
        posts = Post.all
        render json: posts
    end

    def create
        post = Post.new(post_params)
        if post.save
            render json: 'Succeeded', status: 200
        else
            render json: 'Error', status: 500
        end
    end

        private
         def post_params
            params.require(:post).permit(:title, :author, :image, post_items_attributes: [:content, :status])
         end
end

Nuxt.js

저장/할 일js

export const state = () => ({
  list: [],
  hidden: false
})

export const mutations = {
    add (state, text) {
    state.list.push({
      text,
      status: false
    })
  },


  remove (state, todo) {
    state.list.splice(state.list.indexOf(todo), 1)
  },


  edit (state, { todo, text }) {
    state.list.splice(state.list.indexOf(todo), 1, { text })
  },


  toggle (state, todo) {
    todo.status = !todo.status
  },


  cancel (state, todo) {
    todo.status = false
  },

  switching (state) {
    state.hidden = !state.hidden
  }
}

// Rails send
export const actions = {

  postTextAdd ({ commit }, content) {
    const postAxios = this.$axios.$post
    const url = '/api/v1/'

    postAxios(url + 'posts', {
      post: {
        post_items_attributes: {
          content: 'test',
          status: false
        }
      }
    })
      .then((response) => { 
        commit('add', response)
        console.log(response)
      })
  }
}

템플릿

・・・

  methods: {
    addTodo () {
      // postTextAddでRailsに送る
      if (this.selectedTodo.status === false) {
        this.$store.dispatch('todos/postTextAdd', this.itemText)
        this.itemText = ''
        console.log(this.todos)
      } else {
        this.$store.commit('todos/edit', { todo: this.selectedTodo, text: this.itemText })
        this.itemText = ''
        this.$store.commit('todos/toggle', this.selectedTodo)
      }
    },

에러

터미널

api_1    | Started POST "/api/v1/posts" for 192.168.96.1 at 2021-08-06 07:41:38 +0900
api_1    | Processing by Api::V1::PostsController#create as HTML
api_1    |   Parameters: {"post"=>{"post_items_attributes"=>{"content"=>"test", "status"=>false}}}
api_1    | Completed 500 Internal Server Error in 27ms (ActiveRecord: 0.0ms | Allocations: 4188)
api_1    | 
api_1    | 
api_1    |   
api_1    | TypeError (no implicit conversion of Symbol into Integer):
api_1    |   
api_1    | app/controllers/api/v1/posts_controller.rb:8:in `create'

내가 직접 시도한 것

①api_1 | app/controllers/api/v1/posts_controller.rb:8:in `create'

        def create
        post = Post.new(post_params)
        if post.save
            render json: 'Succeeded', status: 200
        else
            render json: 'Error', status: 500
        end
    end

위의 내용을 확인했는데, create만 저장하기 때문에 오류와 관련된 것인지 알 수 없었습니다.

②TypeError (no implicit conversion of Symbol into Integer):Nuxt가 보낸 데이터와 Rails가 받은 데이터가 다르다고 생각합니다만, Rails의 문서에서 찾아보니 기호 이외에는 찾을 수 없었습니다.

문제가 중첩된 매개 변수에 있습니다.중첩된 속성은 해시가 아닌 해시 배열로 나타납니다.이를 변경하면 다음과 같습니다.

post: {
        post_items_attributes: {
          content: 'test',
          status: false
        }
      }

대상:

post: {
        post_items_attributes: [{
          content: 'test',
          status: false
        }]
      }

그건 작동할 거야.다음 번에 Post 모델 검증이 진행되기 때문에 에러마다 다른 에러가 발생합니다.

언급URL : https://stackoverflow.com/questions/68674559/i-want-to-save-the-data-sent-from-nuxt-js-to-rails