在刀片模板中使用vuejs动态道具

Question

我正在尝试将字符串传递给我制作的vue组件。

<template>
    <div>
        {{selectedValue}}
        <v-date-picker
        mode='single'
        v-model='selectedValue'
        popover-visibility='focus'
        :input-props='{ class: "form-control", placeholder: null }'>
        </v-date-picker>
    </div>
</template>

<script>
import Vue from 'vue';
import { setupCalendar, Calendar} from 'v-calendar'
import 'v-calendar/lib/v-calendar.min.css';

setupCalendar({
    firstDayOfWeek: 1
});

export default {
    props: ['selectedValue'],
};
</script>

然后在刀片模板中，我有了这个。

<date-picker :selectedValue="{{ $appointment->date}}" id="date-reported"></date-picker>

当我像上面那样用冒号执行此操作时，我收到一条提示警告，提示错误编译模板。没有冒号，我不会出现此错误。但是道具没有定义。

我尝试在线查找解决方案，但没有发现任何可以使我朝正确方向发展的方法。