2020/3/13 - きっと君には見えない

Vueコンポーネントの中での変数初期化について

private form!: HogeForm; ・・・①

のような書き方をするとリアクティブにならないので注意

!をつけると「その値は絶対存在する(undefinedにならない)」意味が付加されるので，コンポーネントから参照された時にバグの原因になる

なので，

private form: HogeForm | null = null; ・・・②

のように初期化をしてやること，そしてコンポーネント側ではv-if=“form”を加えておくこと

①と②の状態の差異は，console.log()で出力した時にわかる

②の場合は添付画像のように

_ob_: Observer


get content: f reactiveGetter()


set content: f reactiveSetter()

というのがログに加わりリアクティブになっていることがわかる

逆に①の場合は上記の表記が消えてしまい，リアクティブにならない

(オブジェクトに変更が加わってもgetterが発火せず，画面表示の値が切り替わらない)

ね

あと1日がんばろう