vueJs에서 filter() 내의 this가 정의되지 않는 이유는 무엇입니까?

vueJs에서 filter() 내의 this가 정의되지 않는 이유는 무엇입니까?

DOB 양식을 만들고 있습니다.

폼에서 VueJs를 사용하고 있습니다.사용자는 해당 달의 날짜를 먼저 표시해야 하며 해당 날짜가 해당 달의 일수에 따라 표시됩니다.

하고 .filter() 문제는 '''입니다''this에 inside inside inside 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에 inside inside inside data()제 욕구 때문에요.

★★★★★★★★★★★★★★★★ function () {}문맥)this가 없어졌습니다을 사용하다 그 the의 은 which which의 안쪽입니다.filter 함수, " " ", ",thisVue ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.

몇 가지 가능한 해결책이 있습니다.

• 화살표 기능 사용(권장):

  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>

언급URL : https://stackoverflow.com/questions/49714015/why-does-this-inside-filter-gets-undefined-in-vuejs