#実現したいこと
pug内でif文を使用してformの送信先を変更したい
##現状のコード

pug
1    else if title == 'register' || 'change'
2      if title == 'register'
3        h1 パスワード作成
4        form(method='post' action='/hoge/hoge/register/')
5          div
6            input(type='password' placeholder="パスワード" name='password')
7          button 登録
8      else
9        h1 パスワード変更
10        form(method='post' action='/hoge/hoge/change/')
11          div
12            label(for='screen-password-input')
13            input(type='password' placeholder="パスワード" name='password')
14          button 登録

titleの違いで送信先とh1の文言のみが変わればいいため無駄に思える。

##やってみたができなかったコード

pug
1    else if title == 'register' || 'change'
2      if title == 'register'
3        h1 パスワード作成
4        form(method='post' action='/hoge/hoge/register/')
5      else
6        h1 パスワード変更
7        form(method='post' action='/hoge/hoge/change/')
8          div
9            input(type='password' placeholder="パスワード" name='password')
10          button 登録

この形式では、registerの場合に下のフォーム部分が出なくなってしまった。

何かいい書き方をご存知の方、教えていただけると幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

2つ案がありますのでご確認ください。

タイトルだけ分岐

質問欄にあるコードだとelseで分岐させてますが、条件追加を考慮して明示的に分岐させることをお勧めします。

-
  var title = 'register'

if title === 'register'
  h1 パスワード作成
if title === 'change'
  h1 パスワード変更
form(method='post' action=`/hoge/hoge/${title}/`)
  div
    input(type='password' placeholder="パスワード" name='password')
  button 登録

別のobjectを用意する

titleに格納されている内容をkeyとして、別のobjectを作るのもありだと思います。
(もはやtitleという変数名を変えたくなる気もしますが。。。)

-
  var title = 'register'
  var data = {
    'register': 'パスワード作成',
    'change': 'パスワード変更',
  }

h1=data[title]
form(method='post' action=`/hoge/hoge/${title}/`)
  div
    input(type='password' placeholder="パスワード" name='password')
  button 登録

投稿2021/06/16 17:57

編集2021/06/17 04:04