I am new to VueJS and I am having trouble retrieving the value of the selected date range. When I click the button, the console prints out a value of null. Can someone please assist me with this issue?
Below is the code snippet:
App.vue
<template>
<div id="app">
<VueRangedatePicker v-model="datepicker"></VueRangedatePicker>
<button class="button" @click="showdata()" value="Test">Normal</button>
</div>
</template>
<script>
import VueRangedatePicker from "vue-rangedate-picker";
export default {
name: "App",
components: {
VueRangedatePicker
},
data() {
return {
datepicker: null
};
},
methods: {
showdata() {
console.log("DATE PICKER", this.datepicker);
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
To view the full code, visit here.