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

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

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

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

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

受付中

ElementUIでサーバサイドで発生したエラーのメッセージ表示

kyoshitake
kyoshitake

総合スコア12

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

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

0回答

0リアクション

0クリップ

1989閲覧

投稿2019/01/26 02:42

ElementUIでサーバサイドで発生したエラーのメッセージ表示

現在、ElementUIとNuxt.jsでサーバサイドで発生したエラー(一意制約違反)のメッセージを
Form-Item Attributesのerrorに設定することで表示させています。

一度目のエラーにおいては想定した通りに表示されるのですが、同じ値で再度ボタンをクリックした際は(待ちを入れないと)エラーメッセージが表示されません。

直接の原因は、データの変更が非同期に走っているから整合性がとれなくなっていることと推察しているのですが、そもそもこのような事象が発生しているのは使い方に誤りがあるのでしょうか?

2回目のエラー

想定しているエラーメッセージ:'{入力値}は既に使用されています。別のニックネームにしてください。'
実際のエラーメッセージ:''

該当のソースコード

長いですがまずはそのまま貼ります。

Vue(Nuxt)

<template> <section class="container"> <el-form ref="userForm" :model="userForm" :rules="rules" @submit.native.prevent> <el-form-item ref="nickname" :error="errorMessage" label="ニックネームを登録してください。" prop="nickname"> <el-input v-model="userForm.nickname" type="text" autocomplete="off"/> </el-form-item> <el-button type="primary" @click="registNickName">登録</el-button> </el-form> </section> </template> <script> import firebase from '@/plugins/firebase' import axios from 'axios' export default { data: function() { return { userForm: { nickname: '' }, errorMessage: '', rules: { nickname: [ { required: true, whitespace: true, message: 'ニックネームは必ず入力してください。' } ] } } }, methods: { registNickName: async function() { var isValid = false this.$refs['userForm'].validate(valid => { isValid = valid }) if (!isValid) { return } const _outer = this const idToken = await firebase.auth().currentUser.getIdToken() const res = await axios({ method: 'PUT', url: 'http://localhost:8080/user/', headers: { Authorization: `Bearer ${idToken}` }, data: { nickname: _outer.userForm.nickname } }).catch(function(error) { var retVal = 500 if (error.response && error.response.status == 409) { retVal = 409 } return { status: retVal } }) if (res.status == 200) { // 正常系 this.$router.push({ path: '/' }) return } if (res.status == 409) { // 一意制約(ニックネーム重複) /* XXX 2度目の時にthis.errorを一度クリアしないと発火しない。 ただし、少しまってやらないといけない。 データの変更が非同期に走っているから整合性がとれなくなっている? */ this.errorMessage = '' await new Promise(function(resolve, reject) { window.setTimeout(resolve, 10) }) const duplicateMessage = this.userForm.nickname + 'は既に使用されています。別のニックネームにしてください。' this.errorMessage = duplicateMessage this.$message({ message: duplicateMessage, type: 'error' }) return } else { // その他エラー this.$router.push({ path: '/error' }) return } } } } </script> <style> .container { min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } .links { padding-top: 15px; } </style>

試したこと

registNickName関数の先頭で前回のエラーメッセージをクリア(this.errorMessage = '')
した場合はエラーメッセージが表示される。
現在の位置で待ちを入れた場合(await new Promise〜)はエラーメッセージが表示される。
現在の位置で待ちを入れない場合はエラーメッセージが表示されない。

補足情報(FW/ツールのバージョンなど)

node v10.15.0
element-ui "version": "2.4.11"
nuxt "version": "2.3.4",

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

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