How to programmatically set a directives modifier


I would like to programmatically set a directives modifier, so I have the following example which is what i currently have to do.

    <div custom-directive.accordion1></div>

however what I would like to achieve is…

    <div custom-directive.`modName`></div>

export default {
    return {
      modName: 'accordion1'

is this possible? either the way ive done it above or another way would be fine as long as it achieves what im after.


No, this is not possible. The only thing dynamic is the value that you pass to the directive. modifier and argument are static.

hm… this is bad news for me! i am using bootstrap-vue and their accordion example - they use the modifier to identify the element on the page which gets opened and closed when the accordian item header is clicked. I have multiple items in this accordion so im looping through an array of objects with a v-for to create the accordion - the only issue is setting this directive…

I understand that the modifiers becomes an object so…
would become
{'hello': true, 'sir': true}

for reference the boostrap vue directive i am using is

Is there a way to pass a modifier object to the directive instead of one being created from the modifiers specified?

Have you scrolled down the page a bit? In the “Usage” section they show that you can also pass the id as a value instead of a modifier:

…and since that value is a javascript expression, you can set it dynamically.

thank you so much! i’ve been scratching my head for an hour on this and I did not scroll down unfortunately so completely missed that :man_facepalming:

Is there another solution to this in Vue?

We have a form input component, and need sometimes to set the v-model.number for form inputs that expect to only be a number. There doesn’t seem to be any way to set this dynamically, so we’re being forced to cast to numbers all over the place.

Is this possible with basic vue?

No it’s not.

1 Like

It is possible now by dynamic directive arguments via v-directive:[“argument”]. The argument can be catched at the bindings object.