CODEWITHSUNDEEP
nuxt.jsvuetify.jsvuex
Jérome BORGA
Jérome BORGA

Reputation: 705

Vuex nuxt mapstate : DOM not reacting to vuex state change

I'd like to make 2 vuetify v-switch. The first one toggle a boolean on true/false. The second, is disabled if the first one is false, and isnt if its true. If the first switch is passed as false when the second is true, the second should be set to false and therefore, disabled.

Here is what I've done so far :

 computed: {
    ...mapState({
      propertyType: state => state.propertyTypes.current
    })
  }

Here are the code for the 2 switches

  <v-switch
    id="is-filter"
    v-model="propertyType.is_filter"
    flat
    class="mt-0"
    @change="propertyType.default_filter = false
  >
    // template stuff
  </v-switch>
  <v-switch
    id="default-filter"
    v-model="propertyType.default_filter"
    :disabled="!propertyType.default_filter"
    flat
    class="mt-0"
  >
    // template stuff
  </v-switch>

As you can see, the v-model is set on the "imported" state object. Note that state.propertyTypes.current is an object, and has multiples keys and values.

The issue i'm having here is whenever i toggle off the first switch when the second is true, the second is set disabled, but it's value doesn't change in DOM. The vuex state object is updated, but not the DOM.

See image, representing the "vuex bindings" imported but mapState enter image description here

DOM :

enter image description here

How can I fix this and have DOM to be reactiv to this vuex bindings objects ?

Thanks by advance for any help !

Upvotes: 1

Views: 321

Answers (1)

Ahmad Reza Azimi
Ahmad Reza Azimi

Reputation: 582

You cannot call mapState from computed like that: Here is a copy of my code which shows the namespace and state name:

computed: {
        ...mapState("your_vuex_namespace_name", ["propertyType"]),
    }

I hope it helps you out.

Upvotes: 2

Related Questions