I have this component:
<template>
<div>
<label class="col-form-label">
<span>From</span>
</label>
<DatepickerFrom v-on:selected="SetSelectedDateFrom" :value="config.state.fromDate" :disabled="config.disabledFrom"></DatepickerFrom>
</div>
</template>
<script>
import DatepickerFrom from 'vuejs-datepicker'
const dUse = new Date()
export default {
data() {
return {
config: {
disabledFrom: {
to: new Date(dUse.getFullYear() - 1, dUse.getMonth(), dUse.getDate()),
from: new Date(dUse.getFullYear(), dUse.getMonth(), dUse.getDate())
},
state: {
fromDate: new Date(
dUse.getFullYear(),
dUse.getMonth(),
dUse.getDate() - 1
).toString()
}
}
}
},
methods: {
SetSelectedDateFrom: function(selectedDate) {
this.$emit('selected', selectedDate)
}
},
components: {
DatepickerFrom
}
}
</script>
note this part:
:value="config.state.fromDate"
I load this component:
<div class="card selector col-md-4 holder">
<pickerTo v-on:selected="DateSelector2" ></pickerTo>
</div>
import pickerTo from '../components/DateFilterTo'
i have a function that gets the selected value once the a change occurs:
DateSelector2: function(date) {
FromDate = date
}
Once a new date is picked i assign it to a global variable inside of my parent.
Problem :
I have a default date set in the component which I would like to get when I am making a request to the server. I cant figure out how to get this default value since it does not occur within the change event.
I am new to vue.
One of the easiest ways would be to emit the default value when the mounted
function fires.
mounted () {
this.$emit('selected', config.state.fromDate)
}
Other than that I would mutate the value into a prop and alter it slightly to allow it to work with v-model
so that the default value is passed from the parent using whichever method it chooses to derive that value.
EDIT:
Here's how I would refactor it to use a prop.
<template>
<div>
<label class="col-form-label">
<span>From</span>
</label>
<DatepickerFrom v-on:selected="SetSelectedDateFrom" :value="value" :disabled="config.disabledFrom"></DatepickerFrom>
</div>
</template>
<script>
import DatepickerFrom from 'vuejs-datepicker'
const dUse = new Date()
export default {
props: {
value: {
type: String,
required: true
}
},
data() {
return {
config: {
disabledFrom: {
to: new Date(dUse.getFullYear() - 1, dUse.getMonth(), dUse.getDate()),
from: new Date(dUse.getFullYear(), dUse.getMonth(), dUse.getDate())
},
state: {
}
}
}
},
methods: {
SetSelectedDateFrom: function(selectedDate) {
this.$emit('input', selectedDate)
}
},
components: {
DatepickerFrom
}
}
</script>
now you can use your component with the v-model directive for 2 way binding
<component v-model="dateFrom"></component>
...
data () {
return {
dateFrom: new Date(
dUse.getFullYear(),
dUse.getMonth(),
dUse.getDate() - 1
).toString()
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.