CODEWITHSUNDEEP
vue.js
digibonyan
digibonyan

Reputation: 5

vue - Invalid value for dynamic directive argument (expected string or null): undefined

hi I want Use dynamic argument for a directive , this is my HTML code

<div id="app5">
    <p>{{message}}</p>
    <button v-on:[eventName]="reverseMessage">Reverse Message</button>
</div>

and this is my vue instance

 new Vue({
    el: '#app5',
    data: {
        message: 'sgdfhfds hfdsdfhhdfshsdf',
        eventName:'click'
    },
    methods: {
       ....
    }
})

but don't worked and console gave me this error

Invalid value for dynamic directive argument (expected string or null): undefined

Upvotes: 0

Views: 1113

Answers (1)

Decade Moon
Decade Moon

Reputation: 34286

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.

Upvotes: 3

Related Questions