railsの非同期処理でCouldn't find Upload without an IDと表示される

Question

RailsにVue.jsを使用して非同期処理をさせたい

現在、RailsアプリケーションにVue.jsを用いてお気に入り機能の実装をしているのですが、クリック時にActiveRecord::RecordNotFound (Couldn't find Upload without an ID):と表示される原因を解決したくご相談させて頂きました。

具体的な実装イメージとしては、クリック時にデータベースにidが保存され、クリック数に応じてカウント数が変動する実装になっております。

発生している問題・エラーメッセージ

クリック時のエラー

ActiveRecord::RecordNotFound in Api::FavoritesController#create
Couldn't find Upload without an ID
Extracted source (around line #12):
10
11
12
13
14
15
              

    def create
      @upload = Upload.find(params[:upload_id])←該当箇所
      current_user.favorites.create!(favorites_params)
      head :created
    end

エラー内容としては、お気に入りをする際にupload_idがnullのためにお気に入りの保存ができないようになっているのが現状です。

今回は非同期処理で実装を進めているため、投稿内容などが保存されるレイアウトの処理はcomponentsディレクトリ配下にあるFavoriteButtonに記述しております。

こちらの箇所でupload_idがnullと表示される原因があると考えております。

該当のソースコード

app/javascript/components/Favorite/FavoriteButton.vue

<template>
  <div>
    <div v-if="isFavorited" @click="deleteFavorite()">
      いいねを取り消す {{ count }}
    </div>
    <div v-else @click="registerFavorite()">
      いいねする {{ count }}
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { csrfToken } from 'rails-ujs'
axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken()

export default {
  props: ['userId', 'uploadId'],
  data() {
    return {
      favoriteList: []
    }
  },
  computed: {
    count() {
      return this.favoriteList.length
    },
    isFavorited() {
      if (this.favoriteList.length === 0) { return false }
      return Boolean(this.findFavoriteId())
    }
  },
  created: function() {
    this.fetchFavoriteByUploadId().then(result => {
      this.favoriteList = result
    })
  },
  methods: {
    fetchFavoriteByUploadId: async function() {
      const res = await axios.get(`/api/favorites/?upload_id=${this.uploadId}`)
      if (res.status !== 200) { process.exit() }
      return res.data
    },
    registerFavorite: async function() {
      const res = await axios.post('/api/favorites', { upload_id: this.uploadId })
      if (res.status !== 201) { process.exit() }
      this.fetchFavoriteByUploadId().then(result => {
        this.favoriteList = result
      })
    },
    deleteFavorite: async function() {
      const favoriteId = this.findFavoriteId()
      const res = await axios.delete(`/api/favorites/${favoriteId}`)
      if (res.status !== 200) { process.exit() }
      this.favoriteList = this.favoriteList.filter(n => n.id !== favoriteId)
    },
    findFavoriteId: function() {
      const favorite = this.favoriteList.find((favorite) => {
        return (favorite.user_id === this.userId)
      })
      if (favorite) { return favorite.id }
    }
  }
}
</script>

app/views/uploads/index.html.erb

<div id="favorite">
~~省略~~
  <div class="favorite-content">
    <% if user_signed_in? %>
      <favorite-button :user-id="<%= current_user.id %>" :uplaod-id="<%= upload.id %>"></favorite-button>
    <% end %>
  </div>
</div>

app/controllers/api/favorites_controller

# frozen_string_literal: true

module Api
  class FavoritesController < ActionController::API
    before_action :authenticate_user!

    def index
      render json: Favorite.filter_by_upload(params[:upload_id]).select(:id, :user_id, :upload_id)
    end

    def create
      @upload = Upload.find(params[:upload_id])
      current_user.favorites.create!(favorites_params)
      head :created
    end

    def destroy
      current_user.favorites.find(params[:id]).destroy!
      head :ok
    end

    private

    def favorites_params
      params.require(:favorite).permit(:upload_id)
    end
  end
end

app/models/favorite.rb

# frozen_string_literal: true

class Favorite < ApplicationRecord
  belongs_to :user
  belongs_to :upload

  validates :user_id, presence: true
  validates :upload_id, presence: true

  scope :filter_by_upload, ->(upload_id) { where(upload_id: upload_id) if upload_id }
end

/config/routes

# frozen_string_literal: true

Rails.application.routes.draw do
  namespace :api, { format: 'json' } do
    resources :favorites, only: [:index, :create, :destroy]
  end

  devise_for :users
  get 'uploads/index'
  root to: "uploads#index"
  resources :uploads do
    resource :favorites, only: [:create, :destroy]
  end

  resources :users, only: [:show, :edit, :update]

end

試したこと

・favorites_controllerに@upload = Upload.find(params[upload_id])と記述してupload_idを取得できるようにしてみましたが、エラーは変わらずidがnullと表示されたままでした。

・ルーティングに原因がある可能性を考え、
resources :uploads do resource :favorites, only: [:create, :destroy] end
と記述してuploadのルーティングにネストして記述しましたが、こちらもエラー解決にはなりませんでした。

・Vue.jsのファイルで、apiが想定しているparamsに対して異なる値があるために正常に処理されない可能性があると考えておりますが、どの部分を修正すればいいのか分からない状態です。

const res = await axios.post('/api/favorites', { upload_id: this.uploadId })

{
　favorite: { upload_id: 実際の値 }
}
＝＝こちらにparamsとして処理される値が、apiが想定している値とは違うものが送られている可能性がある

補足情報（FW/ツールのバージョンなど）

開発環境
・rubymine
・ruby(3.0.1)
・Ruby on rails (6.1.3.1)

Answer 1

<div id="favorite">
~~省略~~
  <div class="favorite-content">
    <% if user_signed_in? %>
      <favorite-button :user-id="<%= current_user.id %>" :uplaod-id="<%= upload.id %>"></favorite-button>
    <% end %>
  </div>
</div>

こちら正しくは、

 <favorite-button :user-id="<%= current_user.id %>" :upload-id="<%= upload.id %>"></favorite-button>

:uploadの記述ミスでした。