Nuxt.js chekboxのオンオフ時の挙動について

Question

前提・実現したいこと

・フロント

□申込しない
[日付コントロール ] hoge_date

こう言ったフォームがあるとして、
申込しない、をチェックしたらhoge_dateの入力欄は消えて
申込しない、のチェックを外したらhoge_dateの入力欄が現れます

申込しない、をチェックしたらhoge_dateはnullでapi側に値送信
申込しない、のチェックを外したらhoge_dateの入力値がapi側に送信

・API側
hoge_dateのみがパラメータ
そのまdbに保存（nullだと申込しないという全体設計）

この場合、

         
              <div>
                <input
                  :id="do"
                  v-model="isApply"
                  type="checkbox"
                >
                <label
                  :for="do"
                >申し込む</label>
              </div>
  
              <div　v-if = "!isApply">
              　　<Date       ←何らかの日付コントロールと考えてください
                　　v-model=hoge_date
              　　/>
              </div>
            </div>

これでテキストボックスの表示非表示はできたのですが
api側に送信する際、
isApplyがtrueだったらhoge_dateをnullにすると言った
フロントの処理を入れたいのですが
チェックボックスオンオフ時に実現しようと思うとどのようにしたらいいでしょうか？

Answer 1

案1:チェックボックスのクリックイベントでhoge_dateをnullに書き換える
v-on:click="if (!isApply) { hoge_date=null; }"

案2:computedでチェックボックスOFFのときはnullになる属性を定義してそれを送信する
computed: { send_hoge_date: function() { return (this.isApply ? this.hoge_date : null); } }

Comments

[ms5025]

ありがとうございます！！
できそうです！
ちなみに後出しで申し訳ないんですが、それだとチェックボックスを
「やっぱり申し込まない」としてチェックを外した場合
Dateはnullになってしまいますよね・・・？
ここ、チェックを外してもさっき入力した値は保持しておきたい場合は
どうしたらいいでしょうか？
そうなるとクリックタイミングではなく、ａｐｉ送信タイミングで
パラメータいじる感じになるのでしょうか？

[ku__ra__ge]

> チェックを外してもさっき入力した値は保持しておきたい場合はどうしたらいいでしょうか？
案２を使いましょう。

[ms5025]

すみません！そっか、ごめんなさいこっちですね！
ありがとうございます