▼blade(カスタムタグを呼び出す側)
<body> <div id="app"> <my-chronology chronology="{{json_encode( [ $data["chronology"]->date1 => $data["chronology"]->desc1, $data["chronology"]->date2 => $data["chronology"]->desc2, $data["chronology"]->date3 => $data["chronology"]->desc3, $data["chronology"]->date4 => $data["chronology"]->desc4, $data["chronology"]->date5 => $data["chronology"]->desc5, $data["chronology"]->date6 => $data["chronology"]->desc6, $data["chronology"]->date7 => $data["chronology"]->desc7, $data["chronology"]->date8 => $data["chronology"]->desc8, $data["chronology"]->date9 => $data["chronology"]->desc9, $data["chronology"]->date10 => $data["chronology"]->desc10, ] )}}"></my-chronology> </div> <script src="/js/app.js"></script> </body>
▼app.js(カスタムタグの登録)
Vue.component('my-chronology', require('./components/MyChronology.vue')); const app = new Vue({ el: '#app' });
▼my-chronology.vue(カスタムたぐ)
<template> <div id="timeline"> <ul id="dates"> <li v:for="{year, desc} in chronologies"> <a v-bind:href="year">@{{ desc }}</a> </li> </ul> </div> </template> <script> export default { mounted() { var chronologyJson = JSON.parse(this.chronology); Object.keys(chronologyJson).forEach(function (key) { if (key) { chronologies[key] = chronologyJson[key]; } }); this.chronologies = chronologies; console.log(this.chronologies); }, props: { // bladeからJSON.StringfyされたJSON文字列が渡ってくる // "年" => "内容" chronology: { type: String }, year: { type: String }, } } </script>
こんな感じで、bladeからカスタムタグ「my-chronology.vue」に渡されたJSON文字列を、
vueの中でオブジェクトに変換してます。
vueは変換したObjectをv:forでループさせて、keyとvalueを順繰りにliタグとして表示させたいです。
ですが、表示されません。consoleで表示させてる
console.log(this.chronologies);
では正常に以下のような文字列が表示されるのですが、
Object {2010-04: "社会人", 2011-04: "スマホアプリ開発者"}
v:forでループできないといった現象です。
そもそもvuejs自体触り始めたばかりのペーペーでして、使い方が違っていたら申し訳ないです。
諸々、ご教示いただければと存じます。
propはv:forで使えないんだとかありましたら、教えていただきたいです。。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。