[Vuejs]-Is it possible to concatenate class properties in vuejs?

by

3👍

✅

First, just to clarify the question I’m trying to answer. Given the following code:

<div v-if="index % 2" class="lg:flex flex-row-reverse">
  ... children ...
</div>
<div v-else class="lg:flex">
  ... identical children ...
</div>

Is there a way to avoid the v-if and conditionally add the flex-row-reverse class instead?

You’ve got a number of options here. Firstly, the attributes class and style have special behaviour that allows you to specify both a bound and static copy of the same attribute. You can’t do that for other attributes. e.g.

<div
  class="lg:flex"
  :class="{ 'flex-row-reverse': index % 2 }"
>

So the class lg:flex is added as a static class whereas, flex-row-reverse is added conditionally. Vue will combine them as appropriate to create the class attribute of the finished DOM nodes.

There are a number of other ways this could be written. Here are a couple to ponder:

<div :class="{ 'lg:flex': true, 'flex-row-reverse': index % 2 }">

<div :class="['lg:flex', { 'flex-row-reverse': index % 2 }]">

Arrays can be nested arbitrarily deep. Plain strings will be treated as classes to add. Objects will be treated as collections of conditional classes with the class name as the property name and the condition the property value.

All of this is using Vue’s support for conditionally adding classes. However, a bound expression is just arbitrary JavaScript so you could apply the conditionality using normal JavaScript syntax instead of having Vue do it for you.

This is generally clunkier. This has to be a single expression so you can’t use if/else. However, you can use ?: instead:

<div :class="'lg:flex' + (index % 2 ? ' flex-row-reverse' : '')">

The official documentation for these various ways to build classes is here:

https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes

👤skirtle

0👍

Since you are using classes, not <b-img> props, perhaps the class you need is float-right instead of right

    <img v-if="index % 2"
      class="quote-image float-right rounded-full h-64 w-64 shadow-md mx-auto lg:ml-16 lg:mr-10 mt-12"
      :src="$withBase(quote.image)"
    />
👤Troy Morehouse

Leave a comment