admin 管理员组

文章数量: 1086019

If I have a ponent in vue:

<template>
    <ponent v-bind="dynamicAttrs"></ponent>
</template>

And I want to assign some dynamic attributes to it where v-demo is a custom directive:


data() {
  return {
    dynamicAttrs: {
      'class': 'foo'
      'v-demo': true
    }
  }
}

Although I can see the attbitues in the dom the custom directive is not firing in this scenario.

Is there a way I can dynamically assign directives via an object in vue?

If I have a ponent in vue:

<template>
    <ponent v-bind="dynamicAttrs"></ponent>
</template>

And I want to assign some dynamic attributes to it where v-demo is a custom directive:


data() {
  return {
    dynamicAttrs: {
      'class': 'foo'
      'v-demo': true
    }
  }
}

Although I can see the attbitues in the dom the custom directive is not firing in this scenario.

Is there a way I can dynamically assign directives via an object in vue?

  • javascript
  • vue.js
  • vuejs2
Share Improve this question asked Mar 3, 2021 at 17:27 rndwarerndware 2134 silver badges10 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

v-bind is a directive. You can't apply a directive with another directive

It is true what Michael said but maybe you can work around it a bit:

<template>
    <ponent :is="customComponentName" :data="dynamicAttrs"></ponent>
</template>

then you can create a custom ponent that renders based on the data you put in. https://v2.vuejs/v2/guide/ponents.html#Dynamic-Components

option 2:

create an custom directive and put the dynamic values in the arguments:

<template>
    <ponent v-demo:[show]="dynamicMethod" :class="{}" />
</template>

https://v2.vuejs/v2/guide/custom-directive.html#Dynamic-Directive-Arguments

You could do in this manner if you genuinely want this(Just recently, I had the same thing). Although it yikes a little, but it works. If you have more directives, it bees ugly

本文标签： javascriptDynamically assign directives via an object in vueStack Overflow

版权声明：本文标题：javascript - Dynamically assign directives via an object in vue - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1743984278a2513581.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。