bug: computed properties expect to be invoked

[anthony9187]

According to the documentation (and functionally in practice), computed properties should be accessed as similarly to a getter when used outside of the template:

this.computedProperty.value

however typescript throws an error:

Property 'value' does not exist on type '() =>...

which looks like it's expecting computedProperty to be invoked:

this.computedProperty().value

it's more of an annoying type issue than anything else, everything seems to function as expected

[michielvandergeest]

hello @anthony9187, computed props can be accessed outside the template scope by referring to them simply as this.mycomputedProperty. There is no .value-suffix involved there, so Typescript is correctly telling you that Property 'value' does not exists ...

There is also no need to invoke the computed property. The idea is that whenever you access the property (i.e. this.mycomputedProperty) the function associated with the property is executed, allowing you to dynamically generate the response value.

I've tried to search the docs, to see if it's documented wrongly somewhere, but couldn't find it. I may have missed something, so if you wouldn't mind please let us know where this was documented incorrectly (or confusing).

[anthony9187]

Hey @michielvandergeest, sorry if my example was unclear - .value was just an example. In this screenshot we can see what I mean:

I have a computed property getStyles that returns an object which has a property gutterX. If I attempt to reference the computed property as you've described, I'm met with the above error which incorrectly tells me I need to invoke the method.

[anthony9187]

Hey all, just want to bump this. I'm running into it again when trying to use a computed property to create a string off of a state variable which is used as a ref to point to the currently selected item in a list

[michielvandergeest]

hey, thanks for the bump - will put it back on the agenda

as for your last example: curious to see what does your computed property indexSelector look like?

[anthony9187]

ahhh missed that in the screenshot:

computed: {
      indexSelector() {
        return `btn-${this.selectedIndex}`;
      }
    }

i realize this probably doesn't need to be computed from a performance prospective, but being able to reference it as a class property is nice

[michielvandergeest]

Thanks! I imagined it would look something like that. Now not to discard the actual issue (which we will look into), but I would not have used the computed property the way you are using it.

I would either construct the ref string directly in the up and down input methods. Or to make it even more "declarative", you could set up a watcher on the selectedIndex state variable, and whenever that changes you construct the ref string and relay the focus. Much like we do here in the Blits reference app: https://github.com/lightning-js/blits-example-app/blob/master/src/pages/FocusHandling.js#L53-L57

Hope that helps 🙂

[anthony9187]

I appreciate the recommendations! I'll try out those methods, thanks!