How do I implement two-way binding on a Vue.js computed property to reflect store state?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I have a reservation list stored in a Vuex store that tracks reserved items. I use a Vuetify switch to toggle an item's reservation status. When the switch is clicked, the item's ID is added or removed from equipmentStore.reservations. However, the switch does not visually update because the computed property remains read-only.

Here’s my switch code with one‑way binding:

HTML
<v-switch
  hide-details
  inset
  color="black"
  :value="isReserved"
  @change="toggleReservation"
  :disabled="isReserveDisabled"></v-switch>
v-card-actions>

And the computed property is defined as follows:

JAVASCRIPT
isReserved() {
  return equipmentStore.reservations.some(
    item => item.id === this.id
  );
},

When I switch to using v‑model like this:

HTML
<v-switch
  hide-details
  inset
  color="black"
  v-model="isReserved"
  @change="toggleReservation"
  :disabled="isReserveDisabled"></v-switch>

I get a console warning about the computed property being read‑only. I’d like to properly reflect the store’s state in the button without violating Vue’s computed rules. How can I modify my computed property or component to achieve two‑way binding with the store?

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

You should convert your computed property into a two‑way computed (i.e., add a setter) so that v‑model can both read and write the value. For example:

Updated Computed Property

JAVASCRIPT
computed: {
  isReserved: {
    get() {
      return equipmentStore.reservations.some(
        item => item.id === this.id
      );
    },
    set(value) {
      if (value && !this.isReserved) {
        // Add the reservation (call your store action or directly mutate if allowed)
        equipmentStore.addReservation({ id: this.id });
      } else if (!value && this.isReserved) {
        // Remove the reservation from the store
        equipmentStore.removeReservation(this.id);
      }
    }
  },
}

Updated Template

HTML
<v-switch
  hide-details
  inset
  color="black"
  v-model="isReserved"
  :disabled="isReserveDisabled">
</v-switch>

Explanation

The getter returns the current state by checking if the item is in the reservations list.
The setter adds or removes the reservation based on the new value.
By using v‑model with a computed property that includes a setter, you achieve two‑way binding without having a read‑only computed property.

This approach properly reflects the switch's state based on the store value and avoids the warning about a read‑only computed property.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by StellarNavigator637 • 1 month ago

This Warning occurred due to you use computed property.which means it cannot be modified directly.

we can use another way Getter(get()) and Setter(set()) methods as below.

just update computed hook as below snippet code:

JAVASCRIPT
computed: {
  isReserved: {
    get() {
      return equipmentStore.reservations.some(item => item.id === this.id);
    },
    set(value) {
      if (value) {
        // Add the item to reservations if not already present
        if (!this.isReserved) {
          equipmentStore.reservations.push({ id: this.id });
        }
      } else {
        // Remove the item from reservations
        equipmentStore.reservations = equipmentStore.reservations.filter(
          item => item.id !== this.id
        );
      }
    }
  }
}

and also update a v-switch code in template tag as below:

HTML
<v-switch
  hide-details
  inset
  color="black"
  v-model="isReserved"
  :disabled="isReserveDisabled"></v-switch>

It's directly update your store. so we don't need to update v-modal value.

I hope it's working for you.

No comments yet.

Discussion

No comments yet.

How do I implement two-way binding on a Vue.js computed property to reflect store state?

2 Answers

Updated Computed Property

Updated Template

Explanation

Discussion

Similar Posts

How can I correctly integrate Vue3 Carousel as an ES module in a Laravel Blade template?