CODEWITHSUNDEEP
javascriptvuejs2
Md. Shohag Mia
Md. Shohag Mia

Reputation: 374

Vue.js dynamic directive argument not working

I am learning Vue.js(2.6.*). Here they've mentioned dynamic directive arguments. According to there doc, below code should work-

<a v-bind:[attributeName]="url"> ... </a>

If I have a data attribute called

attributeName

in my vue instance. But the below code showing error -

var app = new Vue({
el: "#app",
data: {
message: "Hello World",
argValue: "This is a simple text",
dynamicArg: "title"
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<p v-bind:[dynamicArg]="argValue">
{{message}}
</p>
</div>

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

What I am missing here? TIA

Upvotes: 0

Views: 732

Answers (1)

Vucko
Vucko

Reputation: 20844

In "Dynamic Argument Expression Constraints" it says:

Dynamic argument expressions have some syntax constraints because certain characters, such as spaces and quotes, are invalid inside HTML attribute names. For example, the following is invalid:

<!-- This will trigger a compiler warning. -->
<a v-bind:['foo' + bar]="value"> ... </a>

The workaround is to either use expressions without spaces or quotes, or replace the complex expression with a computed property.

Also camelCase seems to give the warning, which is not mentioned:

var app = new Vue({
  el: "#app",
  data() {
    return {
      message: "Hello World",
      argValue: "This is a simple text",
      dynamicarg: "data-foo"
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>


<div id="app">
  <div :[dynamicarg]="argValue">{{ message }}</div>
</div>

Or even better, create a computed properties which returns the wanted strings name(s).

Upvotes: 1

Related Questions