为什么在 VueJS 中 filter() 中的 `this` 未定义? [英] Why does `this` inside filter() gets undefined in VueJS?

问题描述

我正在创建 DOB 表格.

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

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

新的 Vue ({el: '.app',数据: {月份:[{月:'一月'，天:31}，{月:'二月'，天:28}，{月:'三月'，天:31}，{月:'四月'，天:30}，{月:'五月'，天:31}，{月:'六月'，天:30}，{月:'七月'，天:31}，{月:'八月'，天:31}，{月:'九月'，天:30}，{月:'十月'，天:31}，{月:'十一月'，天:30}，{月:'十二月'，天:31}，],选定月份:[]},计算:{filterDays() {返回 this.months.filter(function(value) {返回 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></选择>

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

解决方案

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

有一些可能的解决方案:

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

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

• 使用.bind():

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

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

  filterDays() {让 vm = 这个；返回 this.months.filter(function(value) {返回 value.month === vm.selectedMonth;});}

演示:

新的 Vue ({el: '.app',数据: {月份:[{月:'一月'，天:31}，{月:'二月'，天:28}，{月:'三月'，天:31}，{月:'四月'，天:30}，{月:'五月'，天:31}，{月:'六月'，天:30}，{月:'七月'，天:31}，{月:'八月'，天:31}，{月:'九月'，天:30}，{月:'十月'，天:31}，{月:'十一月'，天:30}，{月:'十二月'，天:31}，],selectedMonth: 'January'//改为有效月份},计算:{filterDays() {返回 this.months.filter((value) => {返回 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></选择>

I am creating a DOB Form.

I am using VueJS in the form. The user should their date of month first so that day is displayed according to the number of days in the respective month.

I am using filter() and the problem is this inside filter() is undefined. How can I fix 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>

I know using a global variable might be the solution but I want to use selectedMonth inside data() due to my own needs.

解决方案

With function () {} the context (this) is lost. Which means, inside the filter argument function, this will not be the Vue instance.

There are some possible solutions:

• Use arrow functions (preferred):

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

• Use .bind():

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

• Use a local variable outside the function:

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

Demo:

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>

这篇关于为什么在 VueJS 中 filter() 中的 `this` 未定义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！