In my Vue component I have a single method and a single computed property which calls that method.
Twist is that I have a getter class which stores this getter.
Here is the getter class in a separate .js file:
export default class Getter { constructor(getter) { this.get = getter; } }
And here is how I use it in a Vue component:
<script>
import Getter from "@/model/Getter";
export default
{
computed: { property: new Getter(this.getProperty) },
methods: { getProperty() { alert("getter"); } }
}
</script>
The problem I am getting says that this
(inside the Getter
constructor call [line 6]) is undefined
. I do not know why is that.
If line 6 is replaced with:
computed: { property: new Getter(function() { alert(this); }) },
everything works as expected and this
is defined.
Of course I know that I can define getter inline, and that works, but I am just curious about why my example does not work? Why is in the first example this
undefined
?
Getter class is not important here; even without it, it does not work if I do this:
computed: { property: { get: this.getProperty } }
Thank you.