Template Interpolation gets this context wrong for Properties and Getters/Setters in event handlers

[ericdrobinson]

• I have searched through existing issues
• I have read through docs
• I have read FAQ
• I have tried restarting VS Code or running Vetur: Restart VLS

Info

• Platform: macOS
• Vetur version: v0.34.1
• VS Code version: v1.60.2
• Vue version: v2.6.11
• vue-class-component version: v7.2.6
• TypeScript version: v4.4.2

Problem

When using Properties and Getters/Setters (Data and Computed Properties) in inline event handler code, the implicit this appears to be scoped to the type of the event itself. This only happens when you use getters/setters or direct property access. See:

But this doesn't happen when using methods:

In addition, the autocomplete features do correctly understand the context:

Reproducible Case

I am currently working in a private repository and don't have a simple repro case. It happens in every single SFC in this repository, however.

As indicated in the "Info" section above, the codebase currently uses the vue-class-component module for improved ergonomics for component definition. Perhaps this is a factor?

This is likely important as when I say "Properties" above, I'm referring to Vue component Data and when I say "Getters/Setters", I'm referring to Vue Computed Properties.

[yoyo930021]

If you can provide a minio repro case, we study it quickly.
https://github.com/vuejs/vetur/blob/master/.github/NO_REPRO_CASE.md

[ericdrobinson]

@yoyo930021 It's pretty straightforward and happens in every single situation I've tested. It reproduces with this code:

<template>
    <div @click="userID = (userID + 1)">
    </div>
</template>

<script lang="ts">
export default {
    props: {
        userID: {
            type: Number,
            default: -1,
        },
    }
};
</script>

<style>
</style>

That will give you an error that looks like this:

As you can see, it appears to be scoping the left hand side and right hand sides differently. If you change line 2 to the following:

    <div @click="userID = 1 && userID">

and then mouse over the second userID, you'll see this:

Which is also broken.

The only spot that seems to get the context correct is the very first half of the first expression.

[sharkrice]

same problems