Question

我正在创建一个DOB表单。

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

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

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>

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

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>

为什么filter（）中的`this`在VueJS中未定义？

1 个答案: