I use vue version 2
My parent component like this :
<template>
...
<page-heading
:searchChange="searchChange"
></page-heading>
...
</template>
<script>
import PageHeading from "@/views/app/report/PageHeading";
export default {
components: {
"page-heading": PageHeading
},
methods: {
searchChange(val) {
console.log('test search')
console.log(val)
console.log(this.selectedDate)
}
}
};
</script>
My child component like this :
<template>
...
<b-form-group>
<Datepicker
range
v-model="selectedDate"
/>
</b-form-group>
<b-button type="submit" @click="searchChange(val)">Search</b-button>
...
</template>
<script>
import 'vue-datepicker-ui/lib/vuedatepickerui.css';
import VueDatepickerUi from 'vue-datepicker-ui';
export default {
components: {
Datepicker: VueDatepickerUi
},
props: [
"searchChange",
],
data() {
return {
selectedDate: [
new Date(),
new Date(new Date().getTime() + 9 * 24 * 60 * 60 * 1000)]
};
},
};
</script>
When click search button, I want to get selectedDate from child component. So in the parent component, I can read the selectedDate
How do I do that?
Please help. Thanks
You could use the $emit method to the parent with selectedDate as value in child component :
<template>
...
<b-form-group>
<Datepicker
range
v-model="selectedDate"
/>
</b-form-group>
<b-button type="submit" @click="search">Search</b-button>
...
</template>
<script>
import 'vue-datepicker-ui/lib/vuedatepickerui.css';
import VueDatepickerUi from 'vue-datepicker-ui';
export default {
components: {
Datepicker: VueDatepickerUi
},
props: [
"search",
],
data() {
return {
selectedDate: [
new Date(),
new Date(new Date().getTime() + 9 * 24 * 60 * 60 * 1000)]
};
},
methods:{
search(){
this.$emit('on-search',this.selectedDate);
}
}
};
</script>
in parent add a handler for the on-search event :
<template>
...
<page-heading
@on-search="search"
></page-heading>
...
</template>
<script>
import PageHeading from "@/views/app/report/PageHeading";
export default {
components: {
"page-heading": PageHeading
},
methods: {
search(val) {
console.log('test search')
console.log(val)
}
}
};
</script>
or you could use two way binding as in this answer