V-calenderを用いて、Bladeからコンポーネントに渡したデータに基づいて日付をハイライトしたい

Question

前提・実現したいこと

vue.jのライブラリv-calenderを用いて、特定の日付をハイライトしたい。

ページを表示する際に、ViewからVueコンポーネントにデータを渡して、ハイライトする日付を指定したい。

##データの流れ

• コントローラでViewに表示するデータ一覧を取得→OK
• compactでBladeに渡してあげる→OK
• カレンダーコンポーネントを、データベースから持ってきた曜日データと突き合わせてハイライトする→出来てない

＊素のライブラリでのハイライトの仕方は理解できたが、渡し方に苦戦

発生している問題・エラーメッセージ

Axiosを用いてコントローラーから直接値を渡すのではなく、Viewから渡したいが渡し方がわからない。

該当のソースコード

Calender.vue

<template>
    <v-calendar :attributes='attrs'>
    </v-calendar>
</template>

<script>
    import VCalendar from 'v-calendar'
    import 'v-calendar/lib/v-calendar.min.css'

    export default {
        data() {
            return {
                attrs: [
                    {
                        key: 'today',
                        highlight: {
                            backgroundColor: '#ff8080',
                        },
                        // Just use a normal style
                        contentStyle: {
                            color: '#fafafa',
                        },
                        dates: { weekdays: [2, 4, 6]}
                    },
                ],
            }
        },
    }

</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

Comments

[Orlofsky]

URLは https://teratail.com/help#about-markdown の[リンク]を使ってください。

[spoo]

ご指摘ありがとうございます。修正しました

[xenbeat]

関係のないタグ（Docker）を削除してください。

Answer 1

Axios利用

<template>
    <v-calendar :attributes='attrs'>
    </v-calendar>
</template>

<script>
    import VCalendar from 'v-calendar'
    import 'v-calendar/lib/v-calendar.min.css'

    export default {
        data() {
            return {
                attrs: null
            }
        },
        mounted() {

            axios.get('/calender')
                .then(response => {

                    var data = []

            if (response.data.sun_start_at) {
                data.unshift(1)
            }

            if (response.data.mon_start_at) {
                data.unshift(2)
            }

            if (response.data.tue_start_at) {
                data.unshift(3)
            }

            if (response.data.wed_start_at) {
                data.unshift(4)
            }

            if (response.data.thu_start_at) {
                data.unshift(5)
            }

            if (response.data.fri_start_at) {
                data.unshift(6)
            }

            if (response.data.sat_start_at) {
                data.unshift(7)
            }

            this.attrs = [
                {
                    key: 'today',
                    highlight: {
                        backgroundColor: '#ff8080',
                    },
                    // Just use a normal style
                    contentStyle: {
                        color: '#fafafa',
                    },
                    dates: { weekdays: data}
                }
            ]
        }).catch(error =>{console.log(error)})

        }
    }

</script>