vue.js - proper way to compute a value based on a store? - Stack Overflow

I have a view that stores items in a reservation liste. The reservation list sits in a store.

this is a vuetify switch

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

this is the computed:

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

clicking the switch will add and remove id's to the equipmentStore.reservations array. This works but the state of the button is not reflecting that. It stays in to off position.

If we change it to

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

it does work but there is the obivous warning in the console that the computed is readonly.

What would be the proper way to reflect the state of this button based on a value in the store?

I have a view that stores items in a reservation liste. The reservation list sits in a store.

this is a vuetify switch

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

this is the computed:

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

clicking the switch will add and remove id's to the equipmentStore.reservations array. This works but the state of the button is not reflecting that. It stays in to off position.

If we change it to

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

it does work but there is the obivous warning in the console that the computed is readonly.

What would be the proper way to reflect the state of this button based on a value in the store?

• vue.js
• vuetify.js
• pinia

Share Follow edited Jan 30 at 10:15 DarkBee 15.5k88 gold badges7272 silver badges118118 bronze badges asked Jan 30 at 10:14 theking2theking2 2,91622 gold badges3434 silver badges4949 bronze badges 1

• Please, provide stackoverflow.com/help/mcve for your problem . toggleReservation is not shown. You can't use v-model on readonly value, which computed is. Using v-model and @change together indicates that something went wrong, it's either one or another. v-model stands for :model-value, not :value prop. Probably this is what's needed here – Estus Flask Commented Jan 30 at 10:45

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

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:

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:

<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.