How to Pass Props to Class Using VueJS Render Function

Question

The following code works:

export default {
    props: ['tag', 'type', 'size', 'color', 'direction'],
    render(createElement) {
        return createElement(
            this.tag || 'div',
            {
                attrs: { class: 'ui label'}
            },
            this.$slots.default
        );
    }
}

I can create the following html tag and it renders properly:

<label-x tag="a">Label X Text</label-x>

It renders as follows:

<a class="ui label">Label X Text</a>

Now let's add a property to that html tag as follows:

<label-x tag="a" size="large">Label X Text</label-x>

What I want to happen is for the word 'large' to be added to the rendered classes, as follows:

<a class="ui label large">Label X Text</a>

I can't figure out, though, how to make that happen. I tried the following, but I got an error:

export default {
    props: ['tag', 'type', 'size', 'color', 'direction'],
    render(createElement) {
        return createElement(
            this.tag || 'div',
            {
                class: { this.size },
                attrs: { class: 'ui label'}
            },
            this.$slots.default
        );
    }
}

What am I doing wrong -- and, more importantly, how can I do it right?

Thanks.

tony19 · Accepted Answer · 2022-07-15 20:36:05Z

7

This should do it.

export default {
  props: ['tag', 'type', 'size', 'color', 'direction'],
  render(createElement) {
    // set the default classes
    let classes = ["ui", "label"]
    //check to see if we have a size arrtibute
    if (this.size)
      classes.push(this.size)
    
    return createElement(
      this.tag || 'div',
      {
        attrs: { class: classes.join(" ")}
      },
      this.$slots.default
    );
}

Example.

Though, the documentation shows a class property you can use just like you would if you bound to class:

export default {
  props: ['tag', 'type', 'size', 'color', 'direction'],
  render(createElement) {
    let classes = ["ui", "label"]
    if (this.size)
      classes.push(this.size)

    return createElement(
      this.tag || 'div',
      {
        class: classes
      },
      this.$slots.default
    );
  }

Example.

edited Jul 15, 2022 at 20:36

tony19

140k24 gold badges281 silver badges354 bronze badges

answered May 16, 2017 at 23:35

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

2 Comments

Moshe Over a year ago

Thanks - that works. One more question, if I may. Any idea how to do this for multiple props? I.e., for type, color, size & direction?

Bert Over a year ago

@Moshe You could just check them all the same way assuming they are all classes.

Collectives™ on Stack Overflow

How to Pass Props to Class Using VueJS Render Function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related