:class bind with multiple arguments

Question

I'm trying to add a class to my bind however im getting an error on the "+ animation" its saying : is expected, how do i go about getting that class

class="animation__placeholder"
:class="{
  'animation__placeholder--' + animation,
  'animation__placeholder--top':(alignment === 'top'),
  'animation__placeholder--center':(alignment === 'center'),
  'animation__placeholder--bottom':(alignment === 'bottom'),
  'animation__placeholder--right':(side === 'right'),
  'animation__placeholder--center':(side === 'center'),
  'animation__placeholder--left':(side === 'left'),
}"

The text inside `:class="..." is JS code. This object literal syntax is invalid. It's not specific to Vue. — Estus Flask
– Estus Flask, Commented Oct 25, 2022 at 9:40

Amini · Accepted Answer · 2022-10-25 09:36:06Z

1

In your code, you're doing things complex. Here is the simpler one.

new Vue({
  el: '#app',
  data() {
    return {
      animation: 'fade-out',
      alignment: 'center',
      side: 'right'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <section 
    class="animation__placeholder"
    :class="`
      animation__placeholder--${animation}
      animation__placeholder--${alignment}
      animation__placeholder--${side}
    `"
  >Devtools</section>
</div>

answered Oct 25, 2022 at 9:36

Amini

1,8121 gold badge13 silver badges33 bronze badges

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

Comments

Nikola Gava · Accepted Answer · 2022-10-27 20:39:53Z

0

You can bind multiple classes as a list.

:class="['A B', condition1 ? 'C' : 'D', condition2 && 'E']"

Assuming that condition1 evaluates to false and condition2 to true, the resulting component would have classes 'A B D E'.

Now, nothing is stopping you from putting in functions in there from which you return a class name, which is probably a preferred method considering you shouldn't be putting too much login into templates anyway.

With that said, I think that @Amini's solution is very elegant and probably a better fit for your use case.

answered Oct 27, 2022 at 20:39

Nikola Gava

5343 silver badges6 bronze badges

Collectives™ on Stack Overflow

:class bind with multiple arguments

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