How to update DOM when changes occurs within an object rendered by v-for?
After discussing the issue I suggested the following alternative method.
Add activeIndex to data and change the template to the following.
<ul> <li v-for="category, i in categories" :class="{active: activeIndex === i}" @click="activeIndex = i"> <a>{{ category.service_type_name }}</a> </li></ul>This appears to work for @wrahim.
I believe the underlying issue with the original code was that the active property was added to the category falling into one of Vue's change detection caveats.
This works as expected. Your problem is not in the code you posted here. (Even using map: within map, objects are references, so modifying their members modifies the original object.)
new Vue({ el: '#app', data: { categories: [{ service_type_name: 'one', active: false }, { service_type_name: 'two', active: false } ] }, methods: { changeCategory(index) { this.categories.map((c, i) => { c.active = (i != index) ? false : true }) } }});.active { background-color: lightgray;}<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script><ul id="app"> <li v-for="category, i in categories" :class="{active: category.active}" @click="changeCategory(i)"> <a>{{ category.service_type_name }}</a> </li></ul>