前提・実現したいこと
vue.jのライブラリv-calenderを用いて、特定の日付をハイライトしたい。
ページを表示する際に、ViewからVueコンポーネントにデータを渡して、ハイライトする日付を指定したい。
##データの流れ
- コントローラでViewに表示するデータ一覧を取得→OK
- compactでBladeに渡してあげる→OK
- カレンダーコンポーネントを、データベースから持ってきた曜日データと突き合わせてハイライトする→出来てない
*素のライブラリでのハイライトの仕方は理解できたが、渡し方に苦戦
発生している問題・エラーメッセージ
Axiosを用いてコントローラーから直接値を渡すのではなく、Viewから渡したいが渡し方がわからない。
該当のソースコード
Calender.vue
Vue.js
1<template> 2 <v-calendar :attributes='attrs'> 3 </v-calendar> 4</template> 5 6<script> 7 import VCalendar from 'v-calendar' 8 import 'v-calendar/lib/v-calendar.min.css' 9 10 export default { 11 data() { 12 return { 13 attrs: [ 14 { 15 key: 'today', 16 highlight: { 17 backgroundColor: '#ff8080', 18 }, 19 // Just use a normal style 20 contentStyle: { 21 color: '#fafafa', 22 }, 23 dates: { weekdays: [2, 4, 6]} 24 }, 25 ], 26 } 27 }, 28 } 29 30</script>
app.js
Vue.component('calender-component', require('./components/Calender'));
personal_top.blade
<calender-component></calender-component>
試したこと
ドキュメントを読んでも理解しきれなくサンプルが見つからなかったため質問させていただきました
素人質問で申し訳ないですが、助けていただけると大変ありがたいです。
補足情報(FW/ツールのバージョンなど)
laravel5.7
vue.js2.5.7
v-calender
回答1件
あなたの回答
tips
プレビュー