在子组件中过滤道具后如何更新父数据？

Question

I want to change my parent component data after filtering month in the child component. The problem is where I want to download excel data using vue-json-excel the filter month in the parent component don't want to update.

I have tried to using onChange and emitting event with data in parent, after that update the data in parent. I have tried changing data using computed, but it won't work.

## 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>

I expect this.selectedMonth in async fetchData() changed to chosen option, so before I download the excel, I can filter based on selectedMonth. It always returns the default selectedMonth value.

Answer 1

You are emitting "changed" event in the child, while listening to "change" event on the parent.

Use this:

this.$emit("change", newChangedMonth);

instead of this:

this.$emit("changed", newChangedMonth);

Answer 2

Listen for changed event not change

 <TodosList
          v-bind:todos="todos"
          :editedTodo="editedTodo"
          :selectedMonth="selectedMonth"
          :selectedYear="selectedYear"
          :months="months"
          :years="years"
          :json_data="json_data"
          :STORAGE_KEY="STORAGE_KEY"
          @changed="changeSelectedMonth"
        />

OR emit change event

this.$emit("change", newChangedMonth);