Q&A
前提・実現したいこと
夢日記投稿アプリをの投稿機能を実装中
axiosを用いて、API通信を行いcreateメソッドを実行したいです。
がコンソール上で404エラーが返されます。
修正した結果コンソール上で５００エラーが返されるようになり、ターミナル上では
Unpermitted parameter: :dream
が表示されまですが、dreamというパラメーターは使う予定はなく、どこから来てしまっているのか不明です。このdreamというパラメーターを送信されないようにするためにはどうすればよいでしょうか。
パラメーターはtitle,discription,nameの3つで、フォームオブジェクトモデルを使用し、titleとdiscriptionはdreamsテーブルへ、nameはTagsテーブルへ保存される仕様としています。
発生している問題・エラーメッセージ
console
1Error: Request failed with status code 500 2 at createError (createError.js?2d83:16) 3 at settle (settle.js?467f:17) 4 at XMLHttpRequest.handleLoad (xhr.js?b50d:62)
#ターミナルのエラーメッセージ web_1 | NoMethodError (undefined method `create' for DreamsTag:Class): web_1 | web_1 | app/controllers/dreams_controller.rb:8:in `create' web_1 | Started POST "/dreams" for 172.18.0.1 at 2021-03-25 07:58:11 +0000 web_1 | Processing by DreamsController#create as HTML web_1 | Parameters: {"title"=>"ああああ", "name"=>"ああああ", "discription"=>"あああ", "dream"=>{"title"=>"ああああ", "discription"=>"あああ"}} web_1 | Unpermitted parameter: :dream web_1 | Completed 500 Internal Server Error in 6ms (Allocations: 938) web_1 | web_1 | web_1 | web_1 | NoMethodError (undefined method `create' for DreamsTag:Class):
該当のソースコード
＃App.vue <template> <div id="app"> <header> <img alt="Header logo" src="./assets/header-logo.png" height="80"> </header> <a class="index-btn btn-pink" @click="openModal">夢を登録する</a> <div id="overlay" v-if="modal"> <div id="content"> <p>夢の記録しよう！</p> <input class="title-input" v-model="title" placeholder="夢のタイトルを入力"> <input class="tag-input" v-model="name" placeholder="タグを入力"> <div> <textarea class="discription-input" v-model="discription" placeholder="夢の内容を入力" cols="50" rows="10"></textarea> </div> <div class="button-wrapper"> <a class="modal-btn btn-pink" @click="closeModal">Close</a> <a @click="createDream" class="modal-btn btn-pink"> <span> 登録する </span> </a> </div> </div> </div> </div> </template> <script> import axios from 'axios'; export default { name: 'App', components: { }, data(){ return { dreams: [], modal: false, title: this.title, name: this.name, discription: this.discription } }, methods: { openModal() { this.modal = true }, closeModal(){ this.modal = false }, getDream(){ axios.get('http://localhost:3000/dreams') .then(res => (this.dreams = res.data)) .catch(err => { console.log(err) }) }, createDream(){ axios.post('http://localhost:3000/dreams',{ title: this.title, name: this.name, discription: this.discription }) .then(function (response){ console.log(response); }) .catch(function (error){ console.log(error); }); } } } </script> <style> ~略~ </style>
#controller class DreamsController < ApplicationController def index dreams = Dream.all.order(created_at: :desc) render json: dreams end def create @dreams = DreamsTag.create(dream_params) render json: @dreams end private def dream_params params.permit(:title, :discription, :name) end end
#DreamTagsModel class DreamsTag include ActiveModel::Model attr_accessor :title, :discription, :name with_options presence: true do validates :title validates :discription validates :name end def save dream = Dream.create(message: message, discription: discription) tag = Tag.create(name: name) DreamTagRelation.create(dream_id: dream.id, tag_id: tag.id) end end
試したこと
https://qiita.com/tatsurou313/items/4f18c0d4d231e2fb55f4
上記の記事を参考にしました。
input tagのtypeを指定したが動作に変化なし
formタグが不要とのことでしたので、フォームを省きましたが変化なし、
他に何か原因はございますでしょうか。
お力添えの方、よろしくお願い致します。
補足情報（FW/ツールのバージョンなど）
ruby2.6.5
rails 6.1.3
"vue": "^3.0.0",
"vue-axios": "^3.2.4"
"axios": "version": "0.21.1",
回答1件
0
ベストアンサー
おそらく必要なパラメータがないか、認められていないパラメータが含まれているのではないでしょうか。
<form @submit.prevent なのでパラメータが渡っていない可能性があるのではないでしょうか？ Rails側のログをみれば何かわかるのでは。def dream_params params.require(:dreams_tag).permit(:title, :discription, :name) end
axios.post('https://xxxxx/createDream', { title: 'test', discription: 'abc', name: 'hoge' })
とかでテストしてみたらどうでしょうか？
投稿2021/03/24 19:42
編集2021/03/24 19:46
総合スコア266
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/25 06:00 編集
2021/03/25 08:26