Search code examples
javascriptvuejs2vue-componentarrow-functions

Vue "Computed" Value: Regular Function Works, Stabby Arrow Fails

When I write the code like this, it works:

<script>
export default {
    props: ["notes"],
    computed: {
      hasNotes() { return this.notes && this.notes.some(x => x); }
    }
};
</script>

but when I write it like this, it fails:

<script>
export default {
    props: ["notes"],
    computed: {
      hasNotes : ()=> this.notes && this.notes.some(x => x)
    }
};
</script>

... and I don't understand why. What am I doing wrong here?

Solution

  • I'm certain this is a dupe of something, but an arrow function uses lexically scoped this so this doesn't mean what you think it means inside the arrow function.