[Vuejs]-Unable to get my :class to be dynamic using my data property in vue

by

0👍

✅

Few observations :

  • if/else clause written inside changeCatStep() is not correct.
  • Syntax for style binding via :class is not correct.

Working Demo :

new Vue({
  el: '#app',
  data: {
    categoryNameClass: null,
    step_1_active: false,
    step_2_active: false
  },
  mounted(){
    this.categoryNameClass = 'category-name';
  },
  methods: {
    changeCatStep(step) {
      if (step === 'step1') {
        this.step_1_active = true;
        this.step_2_active = false;
      } else {
        this.step_1_active = false;
        this.step_2_active = true;
      }
    }
  }
})
.cat-category-name-color {
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <template>
    <a href="#step-1"
       type="button"
       :class="step_1_active ? `cat-${categoryNameClass}-color` : null" class="btn btn-primary"
       @click="changeCatStep('step1')">Step 1</a>

    <a href="#step-2"
       type="button"
       :class="step_2_active ? `cat-${categoryNameClass}-color` : null" class="btn btn-primary"
       @click="changeCatStep('step2')">Step 2</a>
  </template>
</div>

Leave a comment