esio esio - 1 month ago 9
Sass (Sass) Question

Select css class depend on content

I have a problem with css.

I would like to select element class. I use bootstrap and I would like use bootstrap classes like

.success
or
.danger
.

I use vue.js and I have a object with id, name, status, etc., status name doesn't match to .success or .danger but I need to use this two classess depends of status name.

I know two solution:


  1. Write JS function to return class name depends on status name.
    <tr class={{myFun(object.status)}}
    . My function is simple case statement.

  2. Extend bootstrap class name in sass.
    .STATUS { @extend .success; }



I'm beginner with frontend, before I created very simple static html pages and I'm courious which solution I should use? Maybe another one? I tried to find something in internet but I found nothing interested.
Could anybody has any advice for me?

Answer

You can use Vue's built-in class directive, like so:

<tr
  :class="{
    'success': object.status === 'somestatus',
    'error': object.status === 'otherstatus'
  }">
  ...
</tr>

There's no need to write a new method for that. Take a look at the Class & Style Bindings Guide for more examples.

Comments