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

【问题标题】：How to update parent data after filter props in child component?如何在子组件中过滤道具后更新父数据？
【发布时间】：2019-12-19 00:34:00
【问题描述】：

我想在子组件中过滤月份后更改我的父组件数据。问题是我想使用 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 更改为选择的选项，所以在我下载 excel 之前，我可以根据 selectedMonth 进行过滤。它总是返回默认的 selectedMonth 值。

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

您在子级中发出"changed" 事件，同时在父级中监听"change" 事件。

使用这个：

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

而不是这个：

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

【讨论】：

【解决方案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);

【讨论】：