Adding dynamic class names using vue.js

Question

I've made a customizable flash message using Vue.js. This is working great but the next step is allow a dynamic class to be added to the component.

Flash.vue

<template>
  <transition name="fade">
    <div v-if="showMessage" :class="flash-container {{ styleClass }}">
      <p>{{ message }}</p>
      <p>{{ styleClass }}</p>
    </div>
  </transition>
</template>

<script>
  export default{
    methods: {
      clearMessage () {
        this.$store.commit("CLEAR_MESSAGE")
      }
    },
    computed: {
      message () {
        return this.$store.getters.renderMessage
      },
      showMessage () {
        return this.$store.getters.showMessage
      },
      styleClass () {
        return this.$store.getters.styleClass
      }
    },
  }
</script>

If I try to add it like this I get this error:

- invalid expression: Unexpected token { in

flash-container {{ styleClass }}

Raw expression: v-bind:class="flash-container {{ styleClass }}"

What am I missing here?

tony19 · Accepted Answer · 2022-07-15 01:53:53Z

12

Change it to this and it will work:

:class="[styleClass, 'flash-container']"

Another option would be to split the declarations between the dynamic and static ones:

class="flash-container" :class="styleClass"

Under the hood, the separate ones are joined on render.

This this link for more info: https://v2.vuejs.org/v2/guide/class-and-style.html

edited Jul 15, 2022 at 1:53

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 17, 2018 at 17:23

webnoob

16k13 gold badges87 silver badges169 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 01:17:53Z

5

If you use v-bind, you can't use mustache {{}}. So you can do something like this:

<div class="flash-container" :class="styleClass">
</div>

or

<div :class="`flash-container ${styleClass}`">
</div>

or

<div class="flash-container" :class={'styleClass': true}>
</div>

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

edited Jul 15, 2022 at 1:17

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 17, 2018 at 17:22

Tomasz Kostuch

2491 silver badge14 bronze badges

Collectives™ on Stack Overflow

Adding dynamic class names using vue.js

Flash.vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Flash.vue

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related