質問編集履歴

内容の変更

2021/06/17 15:02

投稿

yuu0000

スコア4

test CHANGED Viewed

	@@ -1 +1 @@
1	- railsにvu~~e.jsを導入したらエラーが起こ~~る
1	+ railsの非同期処理でCouldn't find Upload without an IDと表示される

test CHANGED Viewed

@@ -1,16 +1,16 @@
-### railsにvueを導入したらエラーが起こるので解決したい
+### RailsにVue.jsを使用して非同期処理をさせたい
-``現在Railsアプリケーションにvue.jsを導入して非同期処理をしているのですが、導入後にいくつかエラーが起きてしまっているので原因を解決したくご相談させて頂きました。``
+現在、RailsアプリケーションにVue.jsを用いてお気に入り機能の実装をしているのですが、クリック時に``ActiveRecord::RecordNotFound (Couldn't find Upload without an ID):``と表示される原因を解決したくご相談させて頂きました。
-具体的な実装としては、vue.jsでお気に入り機能の実装をしており、クリック時にデータベースに保存される機能になります。
+具体的な実装イメージとしては、クリック時にデータベースにidが保存され、クリック数に応じてカウント数が変動する実装になっております。
-別のユーザーもお気に入りができるようになっており、お気に入り数に総じてカウントが変動する実装をしております。
@@ -18,71 +18,245 @@
-``ブラウザ起動時のエラー``
+``クリック時のエラー``
-```
+```
-Uncaught SyntaxError: Cannot use import statement outside a module
+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``
+```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'
-    import FavoriteButton from "../../javascript/compenents/Favorite/FavoriteButton";←この部分が該当箇所となっている
+axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken()
-    export default {
+export default {
+  props: ['userId', 'uploadId'],
+  data() {
+    return {
-        components: {FavoriteButton}
+      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``
+```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>
-```
+```
-Failed to load resource: the server responded with a status of 500 (Internal Server Error)
-NameError
-uninitialized constant ApplicationController::API
+``app/controllers/api/favorites_controller``
-Did you mean?
+```controller
-Api
-Extracted source (around line #5):
+# frozen_string_literal: true
-3
-4
-5
-6
-7
-8
 module Api
-  class FavoritesController < ApplicationController::API
+  class FavoritesController < ActionController::API
     before_action :authenticate_user!
@@ -90,445 +264,171 @@
     def index
-```
-```
-[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 500"
-found in
----> <FavoriteButton> at app/javascript/compenents/Favorite/FavoriteButton.vue
-       <Root>
-```
-```
-Error: Request failed with status code 500
-    at createError (createError.js:17)
-    at settle (settle.js:19)
-    at XMLHttpRequest.handleLoad (xhr.js:65)
-```
-### 該当のソースコード
-**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 }
-    }
-  }
+      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``
+```model
+# 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: 実際の値 }
 }
-</script>
+＝＝こちらにparamsとして処理される値が、apiが想定している値とは違うものが送られている可能性がある
-```
+```
-**app/javascript/packs/index.js**
-```
-import 'babel-polyfill'
-import Vue from 'vue'
-// 作成したコンポーネントファイルをimportします
-import FavoriteButton from '../compenents/Favorite/FavoriteButton.vue'
-document.addEventListener('DOMContentLoaded', () => {
-    new Vue({
-        el: '#favorite',
-        components: { FavoriteButton }
-    })
-})
-```
-**app/controllers/api/favorites_controller**
-```
-# frozen_string_literal: true
-module Api
-  class FavoritesController < ApplicationController::API
-    before_action :authenticate_user!
-    def index
-      render json: Favorite.filter_by_upload(params[:id]).select(:id, :user_id, :upload_id)
-    end
-    def create
-      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**
-```
-class Favorite < ApplicationRecord
-  belongs_to :user
-  belongs_to :upload
-  scope :filter_by_upload, ->(upload_id) {where(upload_id: upload_id) if upload_id }
-end
-```
-**app/config/routes**
-```
-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
-  resources :users, only: [:show, :edit, :update]
-end
-```
-**config/webpack/developement.js**
-```
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
-const environment = require('./environment')
-module.exports = Object.assign({}, environment.toWebpackConfig(), {
-    resolve: {
-        alias: {
-            'vue$': 'vue/dist/vue.esm.js'
-        }
-    }
-})
-```
-**app/views/uploads/index.html.erb**
-```
-<%= javascript_pack_tag 'index' %>
-~~省略
-<div class="favorite-content">
-                <div id="favorite">
-                  <% if user_signed_in? %>
-                    <favorite-button :user-id="<%= current_user.id %>" :uplaod-id="<%= upload.id %>"></favorite-button>
-                  <% end %>
-                </div>
-              </div>
-```
-### 試したこと
-**vue.jsの導入方法は下記の通りです。**
-``$bundle exec rails webpacker:install:vue``
-``$yarn add axios rails-ujs``
-上記の実行後に**developement.js**の編集を行いました。
-**コードの確認**
-index.jsファイルで、``import FavoriteButton from '../compenents/Favorite/FavoriteButton.vue'``と末尾に.vueをファイルと同名になるように記述してみたがエラーが変わらず表示されてしまう。
-```api
-module Api
-end
-```
-と記述して``ApplicationController::API``を継承するようにしているがエラー表示の解決には至りませんでした。
@@ -536,18 +436,10 @@
-**開発環境**
+``開発環境``
  ・rubymine
 ・ruby(3.0.1)
 ・Ruby on rails (6.1.3.1)
-・gem 'webpacker', '~> 5.0'
-Githubのリポジトリ
-[github](https://github.com/yuuffff1212/locat)