Vue.jsでコンポーネント内のpropsにキーを追加する方法 Vue.js 2016年05月31日 どうもベル子です。今回は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.htmlprops経由で渡してあるデータに新しいプロパティをセットして、それをリアクティブにしたい場合はthis.$set('user.text', 'やっほー');のようにしないといけない。これを忘れて、「あれ？値は書き換わってるのにリアクティブにならない.....」ということがよくあるので、みんなも気をつけてね！では、急いでるので今日はこの辺で。 [0回]PR
[0回]