質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

1382閲覧

Laravel53でvuejs v2を使って、カスタムタグのpropをv:forする方法について

yu-na

総合スコア27

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2017/01/02 04:05

▼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で使えないんだとかありましたら、教えていただきたいです。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

この質問忘れてました。。
そもそも個人的には最近はBlade使わないので取り下げます。

投稿2019/05/23 00:48

yu-na

総合スコア27

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問