:class bind with multiple arguments

October 25, 2022

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'),
}"

>Solution :

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>