Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
I am using a Vuejs component as a date range picker
It is being used in a Laravel Blade template like this:
<v2-datepicker-range v-model="event_date_range" format="yyyy-MM-DD" lang="en" default="YYYY-mm-dd"></v2-datepicker-range>
<input :value="event_date_range" name="event_date_range" type="hidden"/>
<v2-datepicker-range v-model="cfp_date_range" format="yyyy-MM-DD" lang="en"></v2-datepicker-range>
<input :value="cfp_date_range" name="cfp_date_range" type="hidden"/>
I have those date ranges stored in a database. Using that date range picker,
how would I set the "event_date_range" and "cfp_date_range" values at run time?
My app.js parts that deal with date range stuff
import V2Datepicker from 'v2-datepicker';
const app = new Vue({
el: '#app',
data: {
<other stuff snipped>
event_date_range: "",
cfp_date_range: "",
The event_date_range and cfp_date_range fields correspond to my use
of the components
Copy link

You want to use Vue props:

I've created a component to wrap my Vue stuff in order to use props, though you can also use non-prop attributes on a root element it looks like.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment