ref と v-if でエラー Cannot read property … of undefined（Vue.js）

Vue.jsで ref を使ってフォームから値の取得をしつつ、v-if で要素の表示・非表示を切り替えてるとエラーがでるので解決方法をまとめておく。

再現

• input要素を持つ子コンポーネントを ref で参照
• 子コンポーネントを v-if で隠す
• 子コンポーネントのinputの値を $refs から取得を試みる

→ エラー Uncaught TypeError: Cannot read property … of undefined

input を非表示中に「save text」をクリックするとエラーが発生する。

解決方法

• v-if の代わりに v-show を使う

input を非表示中に「save text」をクリックしてもエラーが発生しない。

まとめ

• v-if で非表示になった要素はDOMツリーから除去される
• v-show で非表示になった要素は display:none が付与される

v-show だと要素が見えなくなるだけでDOMツリーに残っているので、ref で設定した参照経由で値を取得することができる。