Recently, I came across a peculiar issue while working with Vue. Take a look at the code snippet from vue.html:
<label :text=
"$props.information ? (($props.information.primary || $props.information.secondary) | myFilter) : `No info`">
</label>
Surprisingly, this doesn't compile and Vue displays a warning:
[Vue warn]: Property or method "myFilter" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in Root)However, if we remove the ternary operator like so:
<label :text=
"($props.information.primary || $props.information.secondary) | myFilter">
</label>
The code compiles without any issues and recognizes myFilter. It's worth noting that myFilter is defined in boot.ts. What could be causing this error specifically in the first example even though there seems to be no difference in scope?