[Vuejs]-Vuex mutation mutate is not reactive

by

1👍

✅

You dont realy need these active/current variables.
I made example for using computed properties to get desired format

new Vue({
el: "#app",

data: () => ({
    stepBarItems: [
        'General Info',
        'Personal Details',
        'Travel Details',
        'Payment',
        'Upload Documents'
    ],
        stepLevel: 0
}),

computed: {
    computedStepBarItems() {
        return this.stepBarItems.map((item, index) => ({
            title: item,
            current: this.stepLevel === index,
            active: this.stepLevel >= index
        }))
    }
},

methods: {
    next() {
        this.stepLevel += 1
    },

    prev() {
        this.stepLevel -= 1
    }
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <pre>{{ computedStepBarItems }}</pre>
  <button @click="prev()">Prev</button>
  <button @click="next()">Next</button>
</div>
👤Emīls Gulbis

Leave a comment