No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Vuex mutation inside v-for applied to an object in a list

    Help
    2
    7
    526
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      gumball3000 last edited by gumball3000

      Hello, I used this guide to create a store with vuex and I successfully added some properties with it: https://quasar.dev/quasar-cli/vuex-store

      But, I get this error: “Error: [vuex] do not mutate vuex store state outside mutation handlers.” when I update an object from a list of objects I have in the store.

      The error appears when I drag the slider as the model is a property of my object:

                        <q-list dark style="max-width: 400px" dense>
                          <q-item clickable v-ripple v-for="feature in features" :key="feature.id">
                            <q-item-section>
                              <q-item-label>{{feature.name}}</q-item-label>
                              <q-slider v-model="feature.value" :min="-1" :max="1" :step="0.1" snap label/>
                            </q-item-section>
                          </q-item>
                        </q-list>
      

      The object in state.js looks something like this:

          features: [
            {
              id: 0,
              name: "feature 1",
              value: 0
            },
            {
              id: 1,
              name: "feature 2",
              value: 0
            }]
      

      I do have a computed property but it doesn’t seem to help, it works fine when I only have one property.

            computed: {
              features: {
                get() {
                  return this.$store.state.characterCreator.features
                },
                set(val) {
                  this.$store.commit('characterCreator/updateFeatures', val)
                }
              }
            }
      

      The application works and the state does get persisted but I get that error in the console and wish to get rid of it if anyone knows how.

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @gumball3000 last edited by dobbel

        @gumball3000 that’s because you update an entire object instead a single property in the setter. Setter’s don’t play nice with objects if you use v-model and vuex. It’s a Vue thing not specifically Quasar.

        1 Reply Last reply Reply Quote 1
        • G
          gumball3000 last edited by

          I know it doesn’t have anything to do with Quasar, I am just asking if anyone had to do something like this before or if anyone can give me an idea on how to go about it.

          dobbel 1 Reply Last reply Reply Quote 0
          • dobbel
            dobbel @gumball3000 last edited by

            @gumball3000 here are several solutions;

            https://forum.vuejs.org/t/error-form-binding-with-vuex-do-not-mutate-vuex-store-state-outside-mutation-handlers/11941/11

            1 Reply Last reply Reply Quote 1
            • G
              gumball3000 last edited by

              @dobbel thanks for the link, here is how I made it work:

              I used :value and @input for the slider instead of v-model

                                <q-list dark style="max-width: 400px" dense>
                                  <q-item clickable v-ripple v-for="feature in features" :key="feature.id">
                                    <q-item-section>
                                      <q-item-label>{{feature.name}}</q-item-label>
                                      <q-slider :value="feature.value" :min="-1" :max="1" :step="0.1" snap label
                                                @change="updateFeature(feature.id, $event)"/>
                                    </q-item-section>
                                  </q-item>
                                </q-list>
              

              I created a function that gets triggered on @input, it takes the id of the object and the value of the slider:

                      updateFeature(id, e) {
                        console.log(e,id)
                        let pl = {id: id, value: e}
                        this.$store.commit('characterCreator/updateFeature', pl)
                      }
                    }
              

              Here is how my mutation looks now:

              export const updateFeature = (state, pl) => {
                console.log(pl.id, pl.value)
                state.features[pl.id].value = pl.value
              }
              
              dobbel 1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel @gumball3000 last edited by

                @gumball3000 Great! I was wondering: does the slider value still reactivity change if the features in the store are changed by for example another component?

                1 Reply Last reply Reply Quote 0
                • G
                  gumball3000 last edited by

                  I tested it and yes the slider moves to the correct position when changing the values in the store, and, of course, the sliders are still there when I navigate to another page and then go back.

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post