Vue.jsでコンポーネント内のpropsにキーを追加する方法
どうもベル子です。
今回はVue-routerネタを書こうと思ったんですが、
ちょっと時間がないのでこちらのネタを先に。
まず前提としてVue.jsはjQueryを使う場合と全く作法が違うので
JavaScriptのコーディングというよりは、もう新しいものとして理解するのがいいと思う。
引きづられたり、無理やり組み合わせようとすると、シンプルなものも訳が分からなくなる。
この何ヶ月かいじってみた私の感想。
事前にモジュールバンドラーなどの知識が必要なので、
モジュールバンドラーが何か不明なレベルの人は
ベル子の過去記事に目を通すといいと思う(宣伝)。
【Vue.jsでのコーディングで主にすること】
コンポーネントというアプリケーションで使うパーツをたくさん作って、
それを組み合わせて大きなアプリケーションにしていく。
以上。
これだけ聞くとすごく簡単そう。
そしてチュートリアルなんかをやってみると、びっくりするほど簡単に感じる。
今まで自分がやってたことは何だったんだろうと思う。
そしてコードが種類別に整理されていて、すごく読みやすい!
ページの遷移はまったく必要なくなる。
ただ、ハマりポイントも結構ある。
今まで経験したことのないことをやろうとするので見本のコードが見当たらない。
どう組めば実現できるのか想像ができない。
jQueryと組み合わせたり、ほかのプラグインと組み合わせたりする必要が出てくると
DOMが生成されるタイミングとか気にしないといけなくて一気に闇。
そして、かなりハマり度が高いのが、
入れ子になっている親子コンポーネント間でのデータ渡し&更新通知だ。
子コンポーネントに親からprops経由でデータを渡したときに、
コンポーネント内でpropsのオブジェクトにキー(厳密にはプロパティ)を追加したいとする。
当然、以下のようにすると思う。
this.user.text = 'いえーい';
ベル子が年齢を詐称していることは気にせず、まあまずはこれを見てくれたまえ。
https://jsfiddle.net/6yf84nyq/1/
以下をコメントアウトしてupdateしてrunしてみて欲しい。
// this.$set('user.text', 'やっほー');
ひとことは表示されなくなっていることが分かると思う。
詳細は以下を確認して欲しいんだけど、
https://jp.vuejs.org/guide/reactivity.html
props経由で渡してあるデータに新しいプロパティをセットして、
それをリアクティブにしたい場合は
this.$set('user.text', 'やっほー');
のようにしないといけない。
これを忘れて、
「あれ?値は書き換わってるのにリアクティブにならない.....」
ということがよくあるので、みんなも気をつけてね!
では、急いでるので今日はこの辺で。