How can I merge HTML attributes with component data in Vue?

Question

I'm trying to extract some repeated code into a Vue component. I want to be able to pass a list of CSS classes into the component using the class HTML attribute, and merge those with a "default class" that is defined in the component. I want the public interface of this component to resemble a standard HTML element, but if I try to use "class" as a prop Vue throws an error about using a JS keyword. If I try to use $attrs, my default class gets wiped out.

Is it possible to merge HTML attributes with local component data, and use the result in my template? Below is what I would like to achieve:

<template>
  <img src="imageUrl" class="classes"
</template>

export default {
  computed: {
    imageUrl() { return 'urlString' },
  },
  classes() { return `${this.$attrs.class} default-class` }
}

And I'd expect an implementer to be able to use my component like so:

<CustomImageComponent class="class-name another-class" />

Which I'd expect to render this:

<img src="urlString" class="class-name another-class default-class" />

I'm not sure if I understand the question 100%, but it looks to me like you're looking for class="my-static-class" :class="my-passed-classes". which combines static and variables in class name — Daniel
– Daniel, Commented Dec 13, 2018 at 17:21
That's what I'm after, but I want to use HTML attributes rather than a custom prop. — mchandleraz
– mchandleraz, Commented Dec 13, 2018 at 17:26

Daniel · Accepted Answer · 2022-08-15 04:01:42Z

3

It already happens (automatically)

using <CustomImageComponent class="class-name another-class" />

will render<template><img src="imageUrl" class="my-default-class"/></template>

as <img src="imageUrl" class="my-default-class class-name another-class"/>

(in that order, with the in-template class first, and the passed classes after)

the issue is that if you have a nested DOM element that you want to apply it to, you cannot do that and you will have to use a prop

ie:

using <CustomImageComponent class="class-name another-class" />

will render<template><div><img src="imageUrl" class="my-default-class"/></div></template>

as <div class="class-name another-class"><img src="imageUrl" class="my-default-class"/></div>

and there's nothing you can do about that, other than use custom props.

edited Aug 15, 2022 at 4:01

answered Dec 13, 2018 at 17:41

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mchandleraz Over a year ago

No idea why this wasn't working for me... I must've had a syntax error or something, but tried again and it worked. Thanks!

Alizadeh118 · Accepted Answer · 2018-12-13 17:33:25Z

0

You just need to use v-bind: or only colon(:) before the attributes to pass data as a value and that's it, Vue automatically merge classes, see link below:

https://codesandbox.io/s/30oly1z326

answered Dec 13, 2018 at 17:33

Alizadeh118

1,08411 silver badges20 bronze badges

Comments

codeMonkey · Accepted Answer · 2018-12-13 18:25:55Z

-1

A couple things you could do, both with this.$el.classList.

On mounted:

mounted() {
    this.$el.classList.add('default-class');
}

Computed property:

computed: {
    classListWithDefault() { 
        return `${this.$el.classList.toString()} default-class`;
    }
}

edited Dec 13, 2018 at 18:25

answered Dec 13, 2018 at 18:00

codeMonkey

4,9472 gold badges40 silver badges63 bronze badges

Collectives™ on Stack Overflow

How can I merge HTML attributes with component data in Vue?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related