formが書き途中でページ遷移を行おうとしたときに確認メッセージを出す #903
Conversation
mathsuky
changed the title
mathsuky
changed the title
|
手元で検証したのですが、動いている様子が確認できませんでした:shiku2uzaki:
に対応するように実装してみてください:pray: |
|
申し訳ありません。できるだけ早く確認いたします🙏 |
|
上二つに対応して満足して，最後のを実装できていませんでした。本当にすみません🙇 |
|
すみません，上のやつが正しく動作しない時があるので，修正したものをあげなおします🙏 |
|
フォームに何も書かれていない場合の処理が抜けていました。確認不足でした。申し訳ないです。 |
| mounted: function () { | ||
| window.onbeforeunload = () => { | ||
| if (this.inputData) { | ||
| return 'このページを離れると保存されていないデータは破棄されますが，よろしいですか。' | ||
| } | ||
| } | ||
| }, | ||
| destroyed() { | ||
| window.onbeforeunload = null | ||
| }, |
There was a problem hiding this comment.
少なくとも自分の手元では利用中にこの表示を見つけることができなかったので、ここの部分がどのような操作をした際にどのような表示をするのか教えてほしいです:pray:
There was a problem hiding this comment.
この部分については，onbeforeunloadの仕様で，特定のブラウザでのみこのreturnの中身が表示され，それ以外ではブラウザのデフォルトの内容が表示されるそうです。returnの中身が空だとエラーが生じることがあるという記述も見かけたので，一応適当な文章を入れてあります。ただその問題は自分の手元では再現されていません。
説明が不十分で申し訳ありませんでした🙇
There was a problem hiding this comment.
ところで，このonbeforeunloadはiOS上のブラウザでのみうまく動作しないそうです。代替の機能として紹介されていたものがうまく動かなかったのでこれを用いているのですが，やはりこれを使うのは問題だろうと思いましたので，代替のものをうまく使えないか試してみようと思います。(動作は上の写真と似た感じになると思います。)
There was a problem hiding this comment.
ちなみにtraQではこんな感じ(大体おなじ)で書いてるみたいですね
https://github.com/traPtitech/traQ_S-UI/blob/01a24c96d1cf168736a21be5fc92da4e43bb0f04/src/views/MainPage.vue#L76
There was a problem hiding this comment.
ありがとうございます！
traQでは普通にbeforeunloadで書いているんですね。それならばあえてそれを使うのを避ける必要はないのかもしれません。考えてみます。
|
遷移時警告を進捗部屋登録，イベント作成，グループ作成に追加しました。確認よろしくお願いいたします🙏 |
|
ありがとうございます！
|
|
submitするときにもポップアップが出てしまっていそう |
|
submitした時にポップアップが表示される問題を修正しました。追加でイベントとグループの編集で警告が出ない問題を修正しました。ご確認よろしくお願いします🙇 |
|
遅くなりました:bow: |
| beforLeaveGuardinEventEdit = (to, from, next) => { | ||
| if (from.name === 'EventEdit') { | ||
| if (this.isChanged()) { | ||
| if ( | ||
| confirm( | ||
| '入力されたデータは送信されないまま破棄されますが，よろしいですか。' | ||
| ) | ||
| ) { | ||
| removeDraftConfirmer() | ||
| this.cleanupContent() | ||
| next() | ||
| } else { | ||
| next(false) | ||
| } | ||
| } else { | ||
| next() | ||
| } | ||
| } else { | ||
| next() | ||
| } | ||
| } |
There was a problem hiding this comment.
こここんな感じでearly returnさせるとネストが浅くなって読みやすくなるかも
| beforLeaveGuardinEventEdit = (to, from, next) => { | |
| if (from.name === 'EventEdit') { | |
| if (this.isChanged()) { | |
| if ( | |
| confirm( | |
| '入力されたデータは送信されないまま破棄されますが，よろしいですか。' | |
| ) | |
| ) { | |
| removeDraftConfirmer() | |
| this.cleanupContent() | |
| next() | |
| } else { | |
| next(false) | |
| } | |
| } else { | |
| next() | |
| } | |
| } else { | |
| next() | |
| } | |
| } | |
| beforLeaveGuardinEventEdit = (to, from, next) => { | |
| if (from.name !== 'EventEdit' || this.isChanged()) { | |
| next() | |
| } | |
| if ( | |
| confirm( | |
| '入力されたデータは送信されないまま破棄されますが，よろしいですか。' | |
| ) | |
| ) { | |
| removeDraftConfirmer() | |
| this.cleanupContent() | |
| next() | |
| } | |
| next(false) | |
| } |
|
レビューありがとうございます！ |
|
ありがとうございます！マージします！ |
issue451について，とりあえず進捗部屋登録のフォームの部分で，もしフォームに何か書かれている状態でページ遷移をしようとしたときに確認メッセージを出す機能を実装してみました。
方向性がこれで良さそうであれば，他のフォームも含めて実装していこうと思いますが，どうでしょうか。