Is it possible to concatenate class properties in vuejs?

Question

General Question: I was wondering if I can concatenate class properties based on condition. See pseudo-code in the v-forline.

My use-case: I want to align all images that have an even index at the right side.

If I use flex flex-row-reverse for the parent section I get the images aligned on the right. But I don't know how to construct the class in such a way that I do not have to repeat the code for the child elements.

<section
    v-for="(quote, index) of $frontmatter.quotes :class="lg:flex my-4 mx-12 overflow-auto" + {even: index % 2, odd: !(index % 2)}"
  >
    <img
      class="quote-image right rounded-full h-64 w-64 flex items-center justify-center shadow-md mx-auto lg:ml-16 lg:mr-10 mt-12"
      :src="$withBase(quote.image)"
    />

    <div class="px-8 pt-6">
        <h3 class="text-primary font-bold mb-4">
          {{ quote.title }}
        </h3>
      <p>
        {{ quote.text }}
      </p>
    </div>
  </section>

And call the class extension something like:

.even {
   flex-row-reverse
}

Currently,I use this structure - however, I am not happy with that, as I have to repeat my code for the child elements...

<section
        v-for="(quote, index) of $frontmatter.quotes"
        class= "my-16 mx-24 overflow-auto"
      >
      <div v-if="index % 2"
      class="lg:flex flex-row-reverse">
        <img
          class="quote-image rounded-full h-64 w-64 flex items-center justify-center shadow-md mx-auto lg:ml-16 lg:mr-10 mt-12"
          :src="$withBase(quote.image)"
        />
        <div class="px-8 pt-6">
          <blockquote>
            <h2 class="text-primary font-bold mb-4">
              {{ quote.title }}
            </h2>
          </blockquote>
          <p class="quote-text">
            {{ quote.text }}
          </p>
        </div>
      </div>
      <div v-else
        class="lg:flex">
        <img
          class="quote-image rounded-full h-64 w-64 flex items-center justify-center shadow-md mx-auto lg:ml-16 lg:mr-10 mt-12"
          :src="$withBase(quote.image)"
        />
        <div class="px-8 pt-6">
          <blockquote>
            <h2 class="text-primary font-bold mb-4">
              {{ quote.title }}
            </h2>
          </blockquote>
          <p class="quote-text">
            {{ quote.text }}
          </p>
        </div>
      </div>

      </section>

It should look something like:

score 3 · Accepted Answer · edited Jul 15 '22 at 06:02

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

Thanks for the comprehensive explanation and different approaches! — Maeaex1, Dec 09 '19 at 07:25

score 0 · Answer 2 · answered Dec 08 '19 at 18:33

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)"
    />

answered Dec 08 '19 at 18:33

Troy Morehouse

5,320
1
27
38

Unfortunately, this doesn't work but if I use flex flex-row-reverse for the parent section it works. But I struggle to formulate the if statement so the child elements will be the same (I do not have to repeat). I will update my question. But thanks – Maeaex1 Dec 08 '19 at 19:01
Perhaps create a method that returns the classes, and v-bind it to the class attribute. – Troy Morehouse Dec 08 '19 at 22:01

Is it possible to concatenate class properties in vuejs?

2 Answers2