###解決したいこと
画面入力値のパスワード項目を連携(Vue.js→Rails)させたい。
###内容
今回、rails+vue.jsにてWEBアプリケーションを初めて試作するにあたり、質問いたします。
また、初の投稿となるため、情報等不足しておりましたらご指摘ください。よろしくお願い申し上げます。
ユーザ登録画面にて必要項目を入力後、HTTP(post)を発行した際に、サーバ側(rails)にてパスワード項目であるpassword/password_confirmationともにnilとなってしまいます。また、本事象が発生しているため、バリデーション【has_secure_password】が動作し、ユーザは登録はできません。また、バリデーションが動作していることもあり、【bcrypt】は開発環境に導入できております。
なお、同一インスタンスで渡しているname/emailは正しく連携(Vue.js→Rails)できています。
<入力項目>
・ユーザ名(name)
・メールアドレス(email)
・パスワード(password)
・パスワード確認(password_confirmation)
nilではなく、正しいフォームの入力値が渡るようにしたいです。
初歩的なミスだろうと思いますが、ご指摘のほど、よろしくお願い申し上げます。
###試したこと
内容に記載の通り、デバッグ(byebug)にてVue.js側からRails側に情報がストロングパラメータにて情報が渡ることを確認済です。ただし、ユーザ名・メールアドレスのみ連携できており、パスワードはnilとなっております。
Vue.js側のデバッグができておりませんので、調べて実施いたします。
###コード等
error
1Processing by HomeController#index as HTML 2 Rendering home/index.html.erb within layouts/application 3 Rendered home/index.html.erb within layouts/application (Duration: 0.1ms | Allocations: 7) 4[Webpacker] Everything's up-to-date. Nothing to do 5Completed 200 OK in 13ms (Views: 12.6ms | ActiveRecord: 0.0ms | Allocations: 7257) 6 7 8 [1m[35m (0.1ms)[0m [1m[36mbegin transaction[0m 9 ↳ app/controllers/api/v1/users_controller.rb:16:in `create' 10 [1m[36mUser Exists? (0.2ms)[0m [1m[34mSELECT 1 AS one FROM "users" WHERE LOWER("users"."email") = LOWER(?) LIMIT ?[0m [["email", "test@test.com"], ["LIMIT", 1]] 11 ↳ app/controllers/api/v1/users_controller.rb:16:in `create' 12 [1m[35m (0.1ms)[0m [1m[31mrollback transaction[0m 13 ↳ app/controllers/api/v1/users_controller.rb:16:in `create' 14Completed 422 Unprocessable Entity in 5090ms (Views: 0.2ms | ActiveRecord: 1.1ms | Allocations: 10282)
vue
1<template> 2 <body> 3 <div v-if="errors.length != 0"> 4 <ul v-for="e in errors" :key="e"> 5 <li><font color="red">{{ e }}</font></li> 6 </ul> 7 </div> 8 <h1>Sign up</h1> 9 <div class="row"> 10 <a class="col s10 m11"> 11 <input v-model="user.name" class="form-control" placeholder="Add your Name" 12 size="200" style="width:500px;"> 13 </a> 14 <a class="col s10 m11"> 15 <input v-model="user.email" class="form-control" placeholder="Email" 16 type="email" size="200" style="width:500px;"> 17 </a> 18 <a class="col s10 m11"> 19 <input v-model="user.password" class="form-control" placeholder="Password" 20 type="password" size="200" style="width:500px;"> 21 </a> 22 <a class="col s10 m11"> 23 <input v-model="user.password_confirmation" class="form-control" placeholder="Confirmation" 24 type="password" size="200" style="width:500px;"> 25 </a> 26 </div> 27 <div class="button_wrapper"> 28 <button v-on:click="createUser" class="btn btn-lg btn-primary">Create my account</button> 29 </div> 30 </body> 31</template> 32 33<script> 34import axios from 'axios'; 35 36export default { 37 data: function () { 38 return { 39 user: { 40 name: '', 41 email: '', 42 password: '', 43 password_confirmation: '' 44 }, 45 errors: '' 46 } 47 }, 48 methods: { 49 createUser: function () { 50 axios 51 .post('/api/v1/users', this.user) 52 .then(response => { 53 }) 54 .catch(error => { 55 console.error(error); 56 if (error.response.data && error.response.data.errors) { 57 this.errors = error.response.data.errors; 58 } 59 }); 60 } 61 } 62} 63</script> 64 65<style scoped> 66//関係ない 67</style>
gemfile
1source 'https://rubygems.org' 2git_source(:github) { |repo| "https://github.com/#{repo}.git" } 3 4ruby '2.6.3' 5 6gem 'rails', '~> 6.0.1' 7gem 'puma', '~> 4.1' 8gem 'sass-rails', '>= 6' 9gem 'webpacker', '~> 4.0' 10gem 'turbolinks', '~> 5' 11gem 'jbuilder', '~> 2.7' 12gem 'bootsnap', '>= 1.4.2', require: false 13gem 'bootstrap-sass' 14gem 'bcrypt' 15gem 'jquery-rails' 16gem 'materialize-sass' 17gem 'material_icons' 18 19group :development, :test do 20 gem 'sqlite3', '~> 1.4' 21 gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] 22end 23 24group :development do 25 gem 'web-console', '>= 3.3.0' 26 gem 'listen', '>= 3.0.5', '< 3.2' 27 gem 'spring' 28 gem 'spring-watcher-listen', '~> 2.0.0' 29end 30 31gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 32
railsModel
1class User < ApplicationRecord 2 before_save { self.email = email.downcase } 3 VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+.[a-z]+\z/i 4 validates :name, presence: true, length: { maximum: 50 } 5 validates :email, presence: true, length: { maximum: 255 }, 6 format: { with: VALID_EMAIL_REGEX }, 7 uniqueness: { case_sensitive: false } 8 has_secure_password 9 validates :password, presence: true, length: { minimum: 6 } 10end 11
railsController
1class Api::V1::UsersController < ApiController 2 before_action :set_user, only: [:show] 3 4 def show 5 render json: @user 6 end 7 8 def index 9 @users = User.all 10 render json: @users 11 end 12 13 def create 14 @user = User.new(user_params) 15 debugger 16 if @user.save 17 render json: @user, status: :created 18 else 19 render json: { errors: @user.errors.full_messages }, status: :unprocessable_entity 20 end 21 end 22 23 private 24 25 def set_user 26 @user = User.find(params[:id]) 27 end 28 29 def user_params 30 params.require(:user).permit(:name, :email, :password, :password_confirmation) 31 end 32end
route
1Rails.application.routes.draw do 2 root 'home#index' 3 get '/signup', to: 'home#index' 4 get '/users', to: 'home#index'#暫定です 5 get '/users/1', to: 'home#index'#暫定です 6 namespace :api, {format: 'json'} do 7 namespace :v1 do 8 resources :users, only: [:index, :show, :create] 9 end 10 end 11end
あなたの回答
tips
プレビュー