時間が空いてしまったけれど、何もしていないわけではない。
引き続き Vue.js による開発を続けている。
先月、React を用いて開発したときよりも、Vue.js の方が、(私的には)非常にわかりやすい。とくに親コンポーネントと子コンポーネントとのデータのやりとりが、ReactよりVue.jsの方が、後からコードを読んだときにわかりやすい気がする。(長い時間をかけてコーディングをすれば、そうでもないのだろう。)
現在、直面している問題として、Vue.jsによる親コンポーネントから子コンポーネントの関数の呼び出しである。結果としては「動いている」のだけれど、「ターミナル上ではエラー」が出ている。
30:20 Property 'addTrack' does not exist on type 'Element | Element[] | Vue | Vue[]'.
Property 'addTrack' does not exist on type 'Element'.
28 | // Property 'addTrack' does not exist on type 'Element | Element[] | Vue | Vue[]'.
29 | // Property 'addTrack' does not exist on type 'Element'.
> 30 | this.$refs.tvc.addTrack()
| ^
Propsでは値を受け渡すだけで、関数を呼び出せないみたいだし、公式ドキュメントによると、refもあまり推奨されていないらしい。
「addTrack」という関数をもっていると、どこかに明示する必要があるのか、ググってもいまいちわからない。
Vuexを使うほどでもない。
諦めかけていたところ、暁光。
1)Nuxt(Vue) + TypeScriptでの$refsの参照エラー
TypeScriptの記述の問題らしい。
$refs がもともと定義されていないから起こったのかな?
$refs!:{
tvc: HNTrackViewController
}
こんな感じでしっかりと明示してやると、無事動きました。めでたし。
(refで参照したりと、やってることは、Reactとあまり変わらんかもしれんね。)
2)vue.js + typescript = vue.ts ことはじめ
ついでに、 $emit の記述を 2) を参考に修正。import に Emit を含めるのを忘れずに。
@Emit('add-track')
public addTrackToApp() {
//this.$emit('add-track')←元のコード
return
}
将来的に、DB使ったり非同期処理使ったりしたいなら、Angularを選択した方が良いのかなとも思ったのですが、とりあえず、Vue.jsで開発を続けます。
投稿記事のカテゴリやタグと同じ記事をランダム表示します。