質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1430閲覧

Vue.js/Rails(bcrypt)にてパスワード項目のみ連携(Vue.js→Rails)できない

Ka_na_ta

総合スコア4

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/12/08 14:00

編集2019/12/10 09:48

###解決したいこと
画面入力値のパスワード項目を連携(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  (0.1ms) begin transaction 9 ↳ app/controllers/api/v1/users_controller.rb:16:in `create' 10 User Exists? (0.2ms) SELECT 1 AS one FROM "users" WHERE LOWER("users"."email") = LOWER(?) LIMIT ? [["email", "test@test.com"], ["LIMIT", 1]] 11 ↳ app/controllers/api/v1/users_controller.rb:16:in `create' 12  (0.1ms) rollback transaction 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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問