質問: function() { new Vue({ el: '#app', data: { consulting:[ { 'slug':'/consulting/aaaa/', 'name':'狭い土地利用' }, { 'slug':'/consulting/bbbb/', 'name':'丁度よいい土地利用' }, { 'slug':'/consulting/ccccc/', 'name':'広いい土地利用' } ], contents:[ { 'slug':'/contents/', 'name':'コンテンツについて' }, { 'slug':'/contents/mmmmm/', 'name':'点々' }, { 'slug':'/contents/llll/', 'name':'増やしていきましょう' } ] } }) }; ``` ### やりたいこと ### 補足情報(言語/FW/ツール等のバージョンなど) vue.js2.5.2使用 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/470b8914abdf80d9aa3a24e5c19ea17c.jpeg)
回答: フロントエンド側ではオススメ順で言うと 1,vue-routerを使用してリンククリックでコンポーネントに遷移するようにして、パラメータを渡して、h1要素にマスタッシュ記法でそのパラメータを代入。 2,マスタッシュ記法で新たなdataプロパティを用意し、mounted時に現在のlocationを取得して、locationに対応するdataプロパティに代入する。 3,2と同様の処理をmethodsプロパティで行う。 などの方針があります。SPAを作成してる場合は1の方針が最適ですが、バックエンドでテンプレートをレンダリングしている場合は1の方針が取りづらいので、2,3の方針が良いと思います。 またはリクエストパラメータなどを紐付けてしまい、バックエンド側からレンダリングするという手もあります。ただし、こちらはバックエンドの実装と密結合になるため、あまりオススメはしません。 追記 以下のリンク先で、3番の方法を実現しています。(追記 すみません。なぜか古い履歴のコードへのリンクが張られていました。うまくいっているコードは以下のようになります。また、fiddleは、window.onloadが発火しないのと、古いコードはマスタッシュの記述漏れがあったので動かなかった感じです。)