After filtering the month in the child component, I am trying to update the data in my parent component. However, when I attempt to download excel data using vue-json-excel, the filtered month in the parent component refuses to update.
I have experimented with using onChange and emitting events with data in the parent component, then updating the data. I have also attempted to change the data using computed properties, but to no avail.
## Parent (App.vue) ##
<template>
</div>
<TodosList
v-bind:todos="todos"
:editedTodo="editedTodo"
:selectedMonth="selectedMonth"
:selectedYear="selectedYear"
:months="months"
:years="years"
:json_data="json_data"
:STORAGE_KEY="STORAGE_KEY"
@change="changeSelectedMonth"
/>
<download-excel
class="button"
:fields="json_fields"
:fetch="fetchData"
worksheet="My Worksheet"
name="capaian_kinerja_pegawai.xls"
>Download Excel</download-excel>
</div>
</template>
<script>
methods: {
changeSelectedMonth(val) {
this.selectedMonth = val;
},
async fetchData() {
console.log(this.selectedMonth);
let selectedMonth = this.selectedMonth;
let data = this.todos;
let ret = data.filter(function(data) {
return data.month === selectedMonth;
});
return ret;
}
},
</script>
## Child (TodosList.vue) ##
<template>
<div>
<select v-model="selectedMonth" style="width:30%;" @change="onChange(selectedMonth)">
<option v-for="month in months" :key="month" :selected="selectedMonth === month">{{ month }}</option>
</select>
</div>
</template>
<script>
methods: {
onChange(newChangedMonth) {
this.$emit("changed", newChangedMonth);
}
}
};
</script>
When executing async fetchData(), I anticipate that the value of this.selectedMonth will correspond to the chosen option so that I can effectively filter based on the selected month before downloading the excel file. Unfortunately, it always reverts back to the default selectedMonth value.