Vue: @ for event handler doesn't work in cshtml razor page

[deanilvincent]

Version

2.5.9

Reproduction link

https://jsfiddle.net/zausd38u/

Steps to reproduce

Since I'm using the latest version of Vue.JS that supports short hand code for events, I'm trying to use @click instead of v-on:click inside the razor .cshtml file but it doesn't work. I'm developing an app and the backend is ASP.Net Core.

What is expected?

The expected result should be a working:
@click

What is actually happening?

After encoding the @click="submitTest",

Visual Studio says, "The name 'click' does not exist in the current context. Cannot resolve symbol 'click'"

[jkzing]

In Razor syntax, @ character has its own meaning, so this should not actually a vue related "bug".
I guess you may need to use v-on:click directly to get through it because there is not option in vue's compiler to configure which character v-on shortland uses.

[deanilvincent]

yes, I'm using the v-on for alternative. But I hope there's a plugin or something that supports @ of Vue.js in razor page.

[sirlancelot]

In Razor (cshtml) files, you must escape the @ with another @ like so:

<button @@click="submitTest">Submit</button>

A plugin would have to be done when the Razor files get compiled which is long before Vue gets a hold of it.

[posva]

Closing as this doesn't have to be solved on vue side

[deanilvincent]

@sirlancelot Thanks for that tip. Surely I'll use that alternative.
@posva I'll try to drop a feature enhancement in asp.net core section. :)