Vue.js + TypeScript で開発をしている時に、 Props を更新したり、template部分を変更しても、うまく反映され図にかなりはまってしまい、修正に時間がかかってしまった。
結果、 @Component をつけたら、全てが解決した。
なぜ、解決したかも踏まえた、勉強してしっかりまとめておこうと思う。
発生事象
Vue.js + TypeScript で、以下の形式で .vue ファイルを使用して開発を行っていた。
@Component({})
export default class MyComponent extends Vue {
...
}
そうすると、以下のような問題が発生した。
-
dataで設定した場合は画面に反映されるが、Propで設定すると画面に反映されない。 -
templateで設定した内容が反映されない。
解決内容
調べて見ると、共通点として、 @Component を指定しているもののみが上記の事象が反映していることに気づく。
@Component をつけてみると、全てがうまくいった。。。
公式ドキュメントを見ると、 @Component をつけることは必須とのことでした。。。
https://jp.vuejs.org/v2/guide/typescript.html
すごいシンプルなことだったけど、すごいはまって、1-2日使ってしまったので、メモがてら残しておきます。
時間があれば、この辺りの仕組みも少し勉強したい。。。