Vue & LoDash: Toggling Active Tab not working

Question

I have an array of auctions with each element looking like this (significantly shortened for question purpose)

{
    id: 1,
    title: 'N782AM',
    is_active: true
}

I have a button bar of buttons like this

<button
    v-for="(tab, idx) in auctions"
    class="button tab-button"
    :key="tab.id"
    :class="{ active: tab.is_active}"
    @click="toggleTab(idx)">
    {{ tab.title }}
</button>

The method toggleTab() is this

toggleTab(idx) {
    _.forEach(this.auctions, (a) => a.is_active = false);

    this.auctions[idx].is_active = true;
}

++++UPDATED++++ As suggested I changed toggleTab as below

toggleTab(idx) {
   _.forEach(this.auctions, (a) => a.is_active = false);

   Vue.set(this.auctions[idx].is_active, true);
}

this results in this error:

vue.common.js?2371:1037 Uncaught TypeError: Cannot use 'in' operator to search for 'VN-A566' in N-782AM

++++UPDATED++++

My expectation is that when clicked, the clicked tab should be assigned the active class and turn blue and all other tabs should have the active class removed but nothing is happening.

Answer 1

This is a very common reactivity problem. using Vue.set would solve it.

Vue.set has 3 params. Vue.set( target, key, value )

This is an example of how to use it in the method

toggleTab(idx) {
  _.forEach(this.auctions, (a, i) =>
    this.$set(this.auctions[i], "is_active", false)
  );

  this.$set(this.auctions[idx], "is_active", true);
}

Learn more in https://v2.vuejs.org/v2/guide/reactivity.html