[Vuejs]-Vue – Invalid value for dynamic directive argument (expected string or null): undefined

by

3👍

✅

This is happening because your template is defined in the DOM which has the consequence of attributes getting lowercased.

This behavior is mentioned in the docs:

When using in-DOM templates (templates directly written in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase.

So basically the template is this:

<button v-on:[eventname]="reverseMessage">Reverse Message</button>

Your component has no eventname property, hence the undefined.

You will need to change the eventName property to eventname, or don’t use DOM templates which means you will need to define the template in a string or pre-compile the templates using a build system like webpack and vue-loader.

👤Decade Moon

Leave a comment