I am currently working with a specific component that allows for date selection:
<template>
<div class="animated fadeIn">
<div class="col-sm-6 col-lg-6">
<datepicker class="form-control" :value="config.state.fromDate" :disabled="config.disabledFrom"></datepicker>
</div>
<div class="col-sm-6 col-lg-6">
<datepicker :value="config.state.toDate" :disabled="config.disabledTo"></datepicker>
</div>
</div>
</template>
<script>
import Datepicker from 'vuejs-datepicker'
var d = new Date()
var year = d.getFullYear()
var month = d.getMonth()
var day = d.getDate()
var fromD = new Date(year - 1, month, day)
var toDD = new Date(year, month, day)
console.log(fromD.toString())
console.log(toDD)
export default {
data() {
return {
config: {
disabledFrom: {
to: fromD
},
disabledTo: {
from: toDD
},
state: {
fromDate: (d.getDate() - 1).toString(),
toDate: new Date(year, month, day).toString()
}
}
}
},
components: {
Datepicker
}
}
</script>
My approach in using this component involves importing it like so:
import picker from '../components/DateFilter'
Within my Vue setup, I have a button that is supposed to retrieve a property from the imported component on click event:
<template>
<div class="animated fadeIn">
<picker></picker>
</div>
<div>
<button @click="onChange2" class="btn btn-primary">search</button>
</div>
</template>
The method includes an alert to display the value retrieved:
onChange2: function() {
alert(picker.datepicker.value)
}
Error message encountered:
Cannot read property 'value' of undefined
Further attempts made include:
alert(picker.data.config.state.value)
alert(picker.config.state.value)
This issue has been quite challenging for me as a newcomer to Vue. Any assistance would be greatly appreciated.