v-calenderにて生成されるinputタグにclassとnameを指定してあげる

実現したいこと

Vueのライブラリにあるv-calenderを使用したいけど、Bootstrap4のform-controlを適応したり、nameを指定することでPOSTでデータ処理したい。

とりあえず出来たこと

datepicker.component

<template>
    <v-date-picker
        mode='range'
        v-model='selectedDate'
        show-caps
        :input-props='{ name: this.nameProp, class: "input form-control", placeholder: "実施期間を入力するにはここをタップ"}'
    >
    </v-date-picker>
</template>


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

    export default {
        data() {
            return {
                selectedDate: {
                    start: null,
                    end: null,
                }
            };
        },
        props : ['nameProp']
    };
</script>

<style scoped>

</style>

form.blade.php

<div class="form-group">
 <label for="total_schedule">全体スケジュール</label>
 <date-picker id="total_schedule" name-prop="total_schedule"></date-picker>
</div>

補足

ライブラリのドキュメントを読むとどうやら、生成されるinputをいじりたいときは:input-propsをいじってくれとのこと
サンプルを多少いじり、クラスとかは普通に指定できた。

View（Blade）からnameを渡してあげる方法がわからず（Axiosとか使って裏で渡してあげるのは面倒だった）試行錯誤した結果とりあえず動くという段階にたどり着いたコードがこれ

学び

フォームは全部Vueにしとく方が、結局読みやすくて改修しやすくなりそうな予感
初心者が部分的に使ってみようとすると煩雑になりがち

注意

このコードはあくまで初学者が、自分のプロジェクトにて部分的に使ってみた結果なんとか動いたというレベルのコードです。アンチパターンなのかもしれませんがとりあえず自分用の覚書も兼ねてメモしました。