vue.jsでテキストボックスの内容を強制更新したい場合は「$forceUpdate」を使う

vue.jsでテキストボックスに入力された値が不正であった場合に、入力値を無視してテキストボックスをカラにしようとしたが、これがなかなか上手くいかなかった。

具体的には、数値を入れるとこに日本語が入れられた場合は、日本語を無視してテキストボックスをカラで更新するみたいな処理がうまく動作しませんでした。

挙動を見るとカラでの更新が上手く行ったり行かなかったり不安定な挙動。。。

そんなときは「$forceUpdate」を使用したら確実に更新できる!ということがわかりました!

「$forceUpdate」にたどり着くまでに半日くらいかかりました。

$forceUpdateについて公式ページに、以下の記載があります。

Vue インスタンスに再描画を強制します。インスタンス自身と slot コンテンツに挿入された子コンポーネントだけで、全ての子コンポーネントに影響しないことに注意してください。

API — Vue.js
Vue.js - The Progressive JavaScript Framework

$forceUpdateを使うと、強制的に再描画できるということですね!