通过vue中的对象动态分配指令

68bkxrlz 于 2022-12-23 发布在 Vue.js

关注(0)|答案(3)|浏览(126)

如果我在vue中有一个元件：

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

我想给它分配一些动态属性，其中v-demo是一个自定义指令：

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

虽然我可以看到dom中的attbitues，但是在这个场景中，custom指令没有被触发。
有没有办法通过vue中的对象动态分配指令？

vue.js

来源：https://stackoverflow.com/questions/66461957/dynamically-assign-directives-via-an-object-in-vue

3条答案

按热度按时间

hgtggwj01#

v-bind是一个指令。不能将一个指令与另一个指令一起应用

赞(0）回复(0）举报 2022-12-23

uqdfh47h2#

迈克尔说的是真的，但也许你可以绕过它一点：

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

然后，您可以创建一个自定义组件，该组件基于您放入的数据进行呈现。https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components
备选案文2：
创建一个自定义指令，并将动态值放入参数中：

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

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

赞(0）回复(0）举报 2022-12-23

epfja78i3#

如果你真的想这样做，你可以这样做（就在最近，我也做了同样的事情）。虽然有点恶心，但它的工作。如果你有更多的指导，它变得丑陋😉

<template>
  <component class="foo" v-if="hasDemoDirective" v-demo/>
  <component class="foo" v-else/>
</template>

<script>
export default {
  name: 'ComponentWrapper',
  props: {
     hasDemoDirective: {
         type: Boolean,
         default: false
     }
  }
}
</script>

赞(0）回复(0）举报 2022-12-23

我来回答

通过vue中的对象动态分配指令

3条答案

相关问题

热门标签

最新问答