title: Adding dynamic class names using vue.js
body: <p>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. </p>
  
  <h3>Flash.vue</h3>
  
  <pre><code>&lt;template&gt;
    &lt;transition name="fade"&gt;
      &lt;div v-if="showMessage" :class="flash-container {{ styleClass }}"&gt;
        &lt;p&gt;{{ message }}&lt;/p&gt;
        &lt;p&gt;{{ styleClass }}&lt;/p&gt;
      &lt;/div&gt;
    &lt;/transition&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    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
        }
      },
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>If I try to add it like this I get this error:</p>
  
  <pre><code>- invalid expression: Unexpected token { in
  
  flash-container {{ styleClass }}
  
  Raw expression: v-bind:class="flash-container {{ styleClass }}"
  </code></pre>
  
  <p>What am I missing here?</p>