QPopupEdit throws Error in callback for watcher "function ()

[wlmost]

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?

[wlmost]

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

[qyloxe]

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.

[sontis]

Hello.
I had same problem for QCheckbox in QTable and Vuex. Solution:
If you are using @save , try using value and not v-model and make sure you update the value accordingly in your method, i.e. as in mutating it in your store.