Rails×Vueでユーザー登録機能を実装する際、params.require(:user)を指定するとエラーが発生するのを解決したい

Question

Rails×Vueでユーザー登録機能を実装する際、params.require(:user)を指定するとエラーが発生するのを解決したい

Vueで作成したformから、axiosを使って「ユーザー名/アドレス/パスワード/確認用パス」を、Railsのusersコントローラーへ送ってユーザー登録機能を作っているのですが、エラーが発生しています。

原因はわかっていて,usersコントローラーでparams.require(:user)を指定した場合に、パスワードと確認用パスを入力しているにも関わらず、入力されていないと判断してしまうからです。

ユーザー名とアドレスは入力しているのを検知できているので、ユーザーモデルで指定してある
has_secure_passwordが何か影響しているのでは？と考え調べたのですが、納得できる答えを見つけられず困っています。

※requireを省略し、permit(:user, :email, :password, :password_confirmation)のみを記載した場合は、無事にユーザーは作成されます。

何か分かる方がいましたら、助言をいただけると幸いです。

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

Error: Request failed with status code 422

vue.runtime.esm.js:638 [Vue warn]: Duplicate keys detected: 'パスワードを入力してください'. This may cause an update error.

該当のソースコード

(user.rb)
class User < ApplicationRecord
  before_save { email.downcase! }
  validates :name, presence: true, length: { maximum: 50 }
  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+.[a-z]+\z/i
  validates :email, presence: true, length: { maximum: 255 },
                    format: { with: VALID_EMAIL_REGEX },
                    uniqueness: true
  has_secure_password
  validates :password, presence: true, length: { minimum: 6 }
end

(users.controller.rb)
class Api::V1::UsersController < ApiController
  before_action :set_user, only: [:show]

  def show
    render json: @user
  end

  def create
    user = User.new(user_params)
    if user.save
      render json: user, status: :created
    else
      render json: { errors: user.errors.full_messages }, status: :unprocessable_entity
    end
  end

  private
    def set_user
      @user = User.find(params[:id])
    end

    def user_params
      params.require(:user).permit(:name, :email, :password,
                                   :password_confirmation)
    end
end

<template>
  <div class="top_contents">
  <form @submit.prevent="createUser">
    <div v-if="errors.length != 0">
      <ul v-for="e in errors" :key="e">
        <li><font color="red">{{ e }}</font></li>
      </ul>
    </div>
    <div>
      <label>ユーザー名</label>
      <input v-model="user.name" type="text">
    </div>
    <div>
      <label>Emailアドレス</label>
      <input v-model="user.email" type="text">
    </div>
    <div>
      <label>パスワード</label>
      <input v-model="user.password" type="password">
    </div>
    <div>
      <label>パスワード(確認用)</label>
      <input v-model="user.password_confirmation" type="password">
    </div>
    <button type="submit">登録</button>
  </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data: function () {
    return {
      user: {
        name: '',
        email: '',
        password: '',
        password_confirmation: ''
      },
      errors: ''
    }
  },
  methods: {
    createUser: function() {
       axios
        .post('/api/v1/users', this.user)
        .then(response => {
          let e = response.data;
          this.$router.push({ name: 'UserDetailPage', params: { id: e.id } });
        })
        .catch(error => {
          console.error(error);
          if (error.response.data && error.response.data.errors) {
            this.errors = error.response.data.errors;
          }
        });
     }
  }
}
</script>

試したこと

上記の問題は、usersコントローラーの
params.require(:user).permit(:name, :email, :password, :password_confirmation)

requireを省略すれば解決できます。

Answer 1

「requireを省略し、permit(:user, :email, :password, :password_confirmation)のみを記載した場合は、無事にユーザーは作成されます。」
ということは、paramsの構造が
{user: {emai: '....', password: '....'}} ではなくちょくに
{emai: '....', password: '....'} になっている、ということです。
viewをみるとそうなっていそうだと言うことがわかります。
logをみると渡ってきたパラメーターが表示されているでしょうから、確認してください。

蛇足
質問のtitleに 「+ Vue」と有ったので、Vueはわからないのでみていませんでした。titleは問題を的確に書いたほうがよいです。