noah.plus

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

2018-10-21

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 で設定した参照経由で値を取得することができる。


noah.plus