Vue.jsのv-modelについて

テキストの入力フォーム等にv-modelを使うと
変数と入力内容を紐付けられるかと思いますが空文字だった場合はnullを入れたいです

変数宣言時にnullを入れておけば、フォームをいじらなければnullのままなのですが
一旦何か記入した後に文字を消して空にすると、変数には空文字が入ってしまいます

これをnullにしたいのですがスマートなやり方があれば教えていただければと思います。

2020/05/20 11:38

> これをnullにしたいのですがスマートなやり方があればスマートというのは、 - v-modelを使ったままでnullにしたい - なるべくコードは増やしたくない（設定があるなら設定だけで済ませたい）ということでしょうか？もう少しスマートとは、について補足して頂けると答えやすくなるかと思います。

tototomoo

2020/05/20 12:03

ご質問ありがとうございます。一番良いのはv-modelを記載しているタグの中で何か書くとできないかなと <input type="text" v-model="hoge" /> 極力v-modelを使ったままのほうが嬉しいです。ぱっと思い浮かぶのが@changeとかでイベント検知してメソッド内にて変更するのが浮かびますが適用したい箇所全部に@changeを書かなければならず見栄えが悪くなるなと... formサブミット時に@submitでイベント検知させた時に全部入れ替えるのも考えられますが他にやり方がないかというところを相談したいです

rubytomato

2020/05/20 12:42

v-modelやv-ifはディレクティブと呼ばれるものですが、独自の動作をするディレクティブ（カスタムディレクティブ）を登録することができます。 https://jp.vuejs.org/v2/guide/custom-directive.html ご要望のようなスマートな解決方法で考えられるのは、『v-modelの動きを拡張したカスタムディレクティブを実装して利用する』ということでしょうか。このようなカスタムディレクティブを作ったことがないので回答できませんが、もし、カスタムディレクティブを実装するということになりましたら、その結果を自己解決という形で共有して頂けたら幸いです。