How to concat text class with Vuejs 2

Question

How do I dynamically concat a text with vuejs 2

Here is what I have now:

<span class="label" :class="label-{{account.Segment}}">{{account.Segment}}</span>

account.Segment == "ABC"

What I need rendered is that

<span class="label label-ABC">ABC</span>

Bert · Accepted Answer · 2017-05-17 16:22:57Z

16

Here is one possible way.

<span class="label" :class="'label-' + account.Segment">{{account.Segment}}</span>

answered May 17, 2017 at 16:22

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Comments

k.ronnakrit · Accepted Answer · 2017-05-18 07:08:08Z

0

You can add more classes using an array of string

computed: {
  classNames() {
    // add more logic here
    let classNames = ['label'];
    classNames.push(`label-${this.contextType}`);
    return classNames;
  },
},

and then you can use it like this

<div :class="classNames">
...
</div>

answered May 18, 2017 at 7:08

k.ronnakrit

1794 bronze badges

Collectives™ on Stack Overflow

How to concat text class with Vuejs 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related