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);

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

2 个答案: