【Vue/Vuetify】Vuetifyのv-text-fieldのclearableを有効にすると、削除時のmodelにはnullが挿入される

VueのUIフレームワークVuetifyでは、テキストボックスである v-text-field に値削除ボタンを表示するオプションが clearable が指定できるのですが、この仕様が少し気になったのでメモします。

---

v-text-field に適当な文字列プロパティをバインドし、フォームの入力値とプロパティの値を連動させます。　

<div id="app">
  <v-app id="inspire">
    <v-col cols="12" sm="6" md="3">
      <v-text-field
            label="Clearable Form"
            v-model='text'
            clearable
            @input="inputed"
            ></v-text-field>
    </v-col>
    <v-col cols="12" sm="6" md="3">
      <p>text: {{ text === null ? 'null' : text }}</p>
    </v-col>
  </v-app>
</div>

new Vue({
  el: '#app',
  data: {
    text: ''
  },
  vuetify: new Vuetify(),
  methods: {
    inputed: function (){console.log(this.text);},
  },
})

See the Pen Vuetify Text Field Clear as null by Ren (@rennnosuke) on CodePen.

フォームに文字列を入力したとき、文字列クリアのための「✗」印が出現します。
これをクリックすることで、v-modelの変数も初期化されるのですが、この値はnullで初期化されます。

Vuetifyのissue上でも、少し話題にはなっている様子。

github.com

個人的には、モデルには任意のオブジェクトが設定できるわけで、故にnullになるのにはそこまで違和感はないかな、という感じなのですが
いかんせん文字列フォームということでうっかり空文字列が設定されると勘違いしちゃいそうですね。

上記issueでは 「クリア時の置換関数を定義できるようにしてはどうか」という意見も上がっていますが、
この機能は是非欲しいですね。

github.com