Updated June 2026. Tested on Vue 3.

If you have ever seen "this is undefined" pop up in your browser console while working with a filter or map callback, you are not alone. I have hit it many times. The cause is always the same: inside a plain function passed to filter, the value of this is not what you expect, so reaching for this.something fails.

Here is the kind of code that triggers it. There are two data properties, a selected subject and a list of programs, and a computed value that filters the programs down to the selected subject.

computed: {
  filteredPrograms() {
    return this.programs.filter(function (program) {
      return program.subjectId === this.subject  // this is undefined here
    })
  }
}

Why it happens

When you pass a normal function to filter, JavaScript calls that function with its own this, which is not the component. So inside the callback, this is not your Vue instance, and this.subject does not exist. The outer filteredPrograms has the right this, but the inner function loses it.

The fix: an arrow function

An arrow function does not get its own this. It keeps the this of where it was written, which here is the component. So switching the callback to an arrow function solves it cleanly.

computed: {
  filteredPrograms() {
    return this.programs.filter(
      (program) => program.subjectId === this.subject
    )
  }
}

This is the right fix today. The old advice to avoid arrow functions for the sake of Internet Explorer no longer applies, since IE is dead and every current browser supports them.

Even better: the Composition API

If you write components with <script setup> and the Composition API, this whole class of bug mostly disappears, because there is no this at all. You refer to your reactive values by name.

<script setup>
import { ref, computed } from 'vue'

const subject = ref(1)
const programs = ref([])

const filteredPrograms = computed(() =>
  programs.value.filter((program) => program.subjectId === subject.value)
)
</script>

There is no this to lose, so the callback just reads subject.value directly.

So when you see "this is undefined" in a callback, reach for an arrow function, and consider moving the component to <script setup> where the problem does not exist in the first place. Questions welcome in the comments.