vue.js - 为什么 filter() 中的 `this` 在 VueJS 中未定义？

Question

我正在创建 DOB 表单。

我在表单中使用 VueJS。用户应将月份的日期放在首位，以便根据相应月份的天数显示日期。

我正在使用 filter()，问题是 filter() 中的 this 未定义。我该如何解决这个问题？

new Vue ({
  el: '.app',
  data: {
    months: [
      {month: 'January', days: 31},
      {month: 'February', days: 28},
      {month: 'March', days: 31},
      {month: 'April', days: 30},
      {month: 'May', days: 31},
      {month: 'June', days: 30},
      {month: 'July', days: 31},
      {month: 'August', days: 31},
      {month: 'September', days: 30},
      {month: 'October', days: 31},
      {month: 'November', days: 30},
      {month: 'December', days: 31},
    ],
    selectedMonth: []
  },
  computed: {
    filterDays() {
      return this.months.filter(function(value) {
        return value.month === this.selectedMonth;
      });
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div class="app">
  <select id="dobd">
    <option v-for="day in filterDays[0].days" :value="day">{{ day }}</option>
	</select>
</div>

我知道使用全局变量可能是解决方案，但由于我自己的需要，我想在 data() 中使用 selectedMonth。

Answer 1

使用 function () {} 上下文 (this) 丢失。这意味着，在 filter 参数函数中，this 不会是 Vue 实例。

有一些可能的解决方案:

• 使用箭头函数(首选):

  filterDays() {
    return this.months.filter((value) => {
      return value.month === this.selectedMonth;
    });
  }
  

• 使用.bind():

  filterDays() {
    return this.months.filter(function(value) {
      return value.month === this.selectedMonth;
    }.bind(this));
  }
  

• 在函数外使用局部变量:

  filterDays() {
    let vm = this;
    return this.months.filter(function(value) {
      return value.month === vm.selectedMonth;
    });
  }
  

演示:

new Vue ({
  el: '.app',
  data: {
    months: [
      {month: 'January', days: 31},
      {month: 'February', days: 28},
      {month: 'March', days: 31},
      {month: 'April', days: 30},
      {month: 'May', days: 31},
      {month: 'June', days: 30},
      {month: 'July', days: 31},
      {month: 'August', days: 31},
      {month: 'September', days: 30},
      {month: 'October', days: 31},
      {month: 'November', days: 30},
      {month: 'December', days: 31},
    ],
    selectedMonth: 'January' // changed to a valid month
  },
  computed: {
    filterDays() {
      return this.months.filter((value) => {
        return value.month === this.selectedMonth;
      });
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div class="app">
  <select id="dobd">
    <option v-for="day in filterDays[0].days" :value="day">{{ day }}</option>
  </select>
</div>