4

I have a single file component called confirm-document that looks something like this:

Sandbox

<template>
  <v-dialog>
    <template v-slot:activator="{ on }">
      <v-btn v-bind="$attrs" :class="activatorClass" v-on="on">{{
        title
      }}</v-btn>
    </template>
    <v-card>
      <v-card-title>{{ title }}</v-card-title>
      <v-card-text><slot></slot></v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: "ConfirmDocument",
  props: {
    title: String,
    activatorClass: {},
  },
};
</script>

So when I then use this component like:

<ConfirmDocument
    class="useless-class"
    activator-class="mt-4 ml-n4"
    title="Consent"
> Document Content </ConfirmDocument>

Sandbox

The classes get applied to the v-dialog, which ends up as an invisible div with nothing inside and both the activator and modal attached as sibling nodes.

Since this is mainly a wrapper component to provide a consistent UI, I actually only need for the activator to be positionable. So I want to pass the class and style props to the v-activator.

The activator-class prop that I have declared actualy works fine. But I am very curious if there a way to change the element to which the component's class and style attributes are bound, so that I can use class instead?

3 Answers 3

6

This is fixed in Vue.js v3 ref

For Vue.js v2, you can try this

Check v-bind and attrs computed property below

<template>
  <v-dialog>
    <template v-slot:activator="{ on }">
      <v-btn v-bind="attrs" v-on="on">{{
        title
      }}</v-btn>
    </template>
    <v-card>
      <v-card-title>{{ title }}</v-card-title>
      <v-card-text><slot></slot></v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: "ConfirmDocument",
  inheritAttrs: false, // <- added just for safety
  props: {
    title: String,
  },
  computed: {
    attrs() {
      const attrs = { ...self.$attrs }

      // adding class and style for `v-bind`
      attrs.class = self.$vnode.data.staticClass
      attrs.style = self.$vnode.data.staticStyle
            
      return attrs
    }
  }
};
</script>

Explanation - In Vue.js version 2.x.x, $attrs does not include class and style (ref) but there are many scenarios in which we wanted to pass on all the props along with class and style into another component so, $attrs should have class and style in it which they did add in version 3 of vue.js. There is a detailed discussion on this topic on github do check it out for more details.

For version 2, what we wanted to achieve is that class and style can be passed to another component. We can pull it off by getting the class [as string] and style [as object] from the current component node i.e. vnode and pass it on to the other component using v-bind.

Now, you can pass props along with class and style into another component inside ConfirmDocument directly from the parent (or caller) component

1

What's about simple using props to handle this?

<template>
  <v-dialog>
    <template v-slot:activator="{ on }">
      <v-btn :class="btnClass" v-on="on">Read {{ title }}</v-btn>
    </template>
    <v-card>
      <slot></slot>
    </v-card>
  </v-dialog>
</template> 

<script>
export default {
   props: {
      btnClass: { type: String },
      title: { type: String }
   }
}
</script>

and using the component:

<confirm-document 
  btn-class="mt-0 mb-0"
  title="Privacy Policy"
>
  Lorem ipsum dolor sit amet
</confirm-document>
4
  • 1
    I don't want to do it this way, as I stated in my question. The reason is because I find it cumbersome and unintuitive. One would need to read the documentation for the component or peek into the component to see how to style the activator when I don't think anyone would want to style anything but the activator.
    – kaan_a
    Feb 24, 2021 at 12:45
  • I don't find it cumbersome and actually find your preferred behaviour misleading. A class on a vue component will always be attached to the root element of the component itself, so why you want to break with this rule? And isn't btn-class more descriptive because you want to use it for the button? Think one step further: you want to pass a custom class to the v-card in the future too. How you want to achieve this?
    – RWAM
    Feb 24, 2021 at 14:18
  • The "root" element that inherits the styles and class is actually never visible. Not even when the modal is open. It doesn't even contain any of the actual visible content. It contains only an empty comment and the activator and modal are attached as siblings. I'm not sure why this is so, but it is how Vuetify has done it. I don't think you would ever actually want to style it
    – kaan_a
    Feb 24, 2021 at 20:08
  • As for the card: I would prefer that it isn't styled outside of the component. This isn't part of a package, it's a wrapper component to create a consistent UI across the app. So all the styling should happen within this component. I actually think the activator only needs to be positionable rather than fully styleable but it's just so much easier flexible.
    – kaan_a
    Feb 24, 2021 at 20:21
1

I think you can use the inheritAttrs: false property. What it does it to make sure that attributes are not applied automatically to the root element and it lets you choose where to apply them instead.

<template>
  <v-dialog>
    <template v-slot:activator="{ on }">
      <v-btn v-bind="buttonAttrs" >Read {{ title }}</v-btn>
    </template>
    <v-card>
      <slot></slot>
    </v-card>
  </v-dialog>
</template> 

<script>
export default {
  inheritAttrs: false,
  props: {
    title: {type: String},
  },
  computed: {
    buttonAttrs () {
      // select which attrs to apply
      const { title, ...rest } = this.$attrs;

      return rest;
    }
  }
}
</script>

A working (and a bit cluttered) example can be found here.

3
  • I tried this out, and unfortunately it doesn't work. The documentation specifies: "Note that inheritAttrs: false option does not affect style and class bindings."
    – kaan_a
    Feb 24, 2021 at 12:40
  • were you able to solve this? i'm using a third party framework and a i need to pass down classes and styles through a wrapping div and can't do it with $attrs.
    – João Melo
    Dec 24, 2021 at 12:03
  • @JoãoMelo check this answer and let me know if it helps Jan 23, 2022 at 15:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.