QPopupEdit throws Error in callback for watcher "function ()



  • Hello.
    I’m using Quasar 1.0.0beta.
    If I change a value in QPopEdit component I get the following error

    Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."code_text
    

    and

    rror: [vuex] do not mutate vuex store state outside mutation handlers.
        at assert (vuex.esm.js?2f62:87)
        at Vue.store._vm.$watch.deep (vuex.esm.js?2f62:763)
        at Watcher.run (vue.runtime.esm.js?2b0e:4562)
        at Watcher.update (vue.runtime.esm.js?2b0e:4536)
        at Dep.notify (vue.runtime.esm.js?2b0e:730)
        at Object.reactiveSetter [as login] (vue.runtime.esm.js?2b0e:1055)
        at Proxy.set (vue.runtime.esm.js?2b0e:1077)
        at callback (UserEdit.vue?5fca:61)
        at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
        at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
    

    The custom component that I’m building up is following

    co <q-table
          :data="userData"
          :columns="columns"
          title="Benutzerverwaltung"
          row-key="name">
            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td key="login" :props="props">
                  {{ props.row.login }}
                  <q-popup-edit v-model="props.row.login" 
                                           title="Login bearbeiten" 
                                           persistent 
                                           buttons 
                                           label-set="Speichern" 
                                          @save="updateUser">
                    <q-input v-model="props.row.login" autofocus />
                  </q-popup-edit>
                </q-td>
                <q-td key="name" :props="props">
                  {{ props.row.name }}
                  <q-popup-edit v-model="props.row.name" 
                                           title="Name bearbeiten" 
                                           persistent 
                                           buttons 
                                           label-set="Speichern">
                    <q-input v-model="props.row.name" autofocus />
                  </q-popup-edit>
                </q-td>
                <q-td key="email" :props="props">
                  {{ props.row.email }}
                  <q-popup-edit v-model="props.row.email" 
                                           title="Email bearbeiten" 
                                           persistent 
                                           buttons 
                                           label-set="Speichern">
                    <q-input v-model="props.row.email"  autofocus />
                  </q-popup-edit>
                </q-td>
                <q-td key="role" :props="props">
                  {{ props.row.role }}
                  <q-popup-edit v-model="props.row.role" 
                                            title="Rolle bearbeiten" 
                                            persistent 
                                            buttons 
                                            label-set="Speichern">
                    <q-input v-model="props.row.role" autofocus />
                  </q-popup-edit>
                </q-td>
              </q-tr>
            </template>
          </q-table>
          <q-btn push label="Neu" @click="add = true" />de_text
    

    Can someone explain me what is going wrong here?



  • Oh I forgot to mention that this error occurs if change the value.



  • It seems as you change values (role, email, login, name, etc.) from VUEX.
    Changing values in vuex is possible by commiting changes. Please look here:

    https://vuex.vuejs.org/guide/forms.html

    There are more info regarding vuex transactions, search for: “vuex getters setters”. There are even vue plugins which simplify this process of exposing vuex data for dynamic updating.

    Generally it is not a quasar error.


Log in to reply