在子組件中過濾道具后如何更新父數據？

Question

我想在子組件中過濾月份之后更改我的父組件數據。 問題是我想使用vue-json-excel下載excel數據，而父組件中的過濾器月份不想更新。

我嘗試使用onChange並在父級中的數據上發出事件，之后更新父級中的數據。 我曾嘗試使用計算更改數據，但無法正常工作。

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

我希望異步fetchData（）中的this.selectedMonth更改為selected選項，因此在下載Excel之前，我可以基於selectedMonth進行過濾。 它總是返回默認的selectedMonth值。

Answer 1

您正在孩子中發出"changed"事件，同時在父級上聽到"change"事件。

用這個：

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

代替這個：

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

Answer 2

監聽變化的事件不變

 <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"
        />

或發出變更事件

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