Sticky Note – Vue Property binding caveat

My current project is in a bit of a Halfway House, somewhere muddled between a SPA and a dated MVC5 project.

As part of incrementally rolling changes over, we are using VueJS components within CSHTML files, registering globally in the main application entry point.

It’s a bit messy, but it allows a richer UI experience without having to put things on hold for 6 months to build the UI up from the ground.

One thing I did forget while passing in properties from a View to Vue, is the handling of prop names;

<my-component :my-prop="@Json(...)">


<my-component my-prop="@Json(...)">

Subtle difference; the first is bound using the v-bind syntax, the latter being of the standard property syntax.

Why does it matter?

The former does things nicely with plain JSON data, and the framework evaluates as is. The latter requires some JSON parse logic in the component (maybe on mount())

Also, just in case, remember that props are converted via kebab-case, to camelCase;

export default class MyComponent extends Vue {
        required: true
    myProp: string;

   // Logic here

is used like;

<my-component :my-prop="...">