Vue.jsでコンポーネント内のpropsにキーを追加する方法

どうもベル子です。

今回はVue-routerネタを書こうと思ったんですが、

ちょっと時間がないのでこちらのネタを先に。

まず前提としてVue.jsはjQueryを使う場合と全く作法が違うので

JavaScriptのコーディングというよりは、もう新しいものとして理解するのがいいと思う。

引きづられたり、無理やり組み合わせようとすると、シンプルなものも訳が分からなくなる。

この何ヶ月かいじってみた私の感想。

事前にモジュールバンドラーなどの知識が必要なので、

モジュールバンドラーが何か不明なレベルの人は

ベル子の過去記事に目を通すといいと思う（宣伝）。

【Vue.jsでのコーディングで主にすること】

コンポーネントというアプリケーションで使うパーツをたくさん作って、

それを組み合わせて大きなアプリケーションにしていく。

以上。

これだけ聞くとすごく簡単そう。

そしてチュートリアルなんかをやってみると、びっくりするほど簡単に感じる。

今まで自分がやってたことは何だったんだろうと思う。

そしてコードが種類別に整理されていて、すごく読みやすい！

ページの遷移はまったく必要なくなる。

ただ、ハマりポイントも結構ある。

今まで経験したことのないことをやろうとするので見本のコードが見当たらない。

どう組めば実現できるのか想像ができない。

jQueryと組み合わせたり、ほかのプラグインと組み合わせたりする必要が出てくると

DOMが生成されるタイミングとか気にしないといけなくて一気に闇。

そして、かなりハマり度が高いのが、

入れ子になっている親子コンポーネント間でのデータ渡し＆更新通知だ。

子コンポーネントに親からprops経由でデータを渡したときに、

コンポーネント内でpropsのオブジェクトにキー(厳密にはプロパティ)を追加したいとする。

当然、以下のようにすると思う。


this.user.text = 'いえーい';

ベル子が年齢を詐称していることは気にせず、まあまずはこれを見てくれたまえ。

以下をコメントアウトしてupdateしてrunしてみて欲しい。


// this.$set('user.text', 'やっほー');

ひとことは表示されなくなっていることが分かると思う。

詳細は以下を確認して欲しいんだけど、

props経由で渡してあるデータに新しいプロパティをセットして、

それをリアクティブにしたい場合は


this.$set('user.text', 'やっほー');

のようにしないといけない。

これを忘れて、

「あれ？値は書き換わってるのにリアクティブにならない.....」

ということがよくあるので、みんなも気をつけてね！

では、急いでるので今日はこの辺で。

nanisore oishisou