nanisore oishisou

プログラマ、ララ・ベル子さん改めArm4さんのゆるふわ奮闘記。

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', 'やっほー');

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

これを忘れて、

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

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

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