q-popup-edit with q-input leads to Error in v-on handler: "TypeError: setting getter-only property "value""

[donsherman]

I’m struggling for a long time now, but with no success.
I have a q-table with a larger number of columns so i did a loop for all column values (i.e)
(I’m gonna show only the body-slot here)

<q-table
     :dense="$q.screen.lt.md"
     title="Accounts"
     :data="data"
     :columns="columnsI18n"
     row-key="Idx"
     :visible-columns="visibleColumns"
     selection="multiple"
     :loading="loading"
     class="myColHeader"
     ref="accountTable"
     :filter="filter"
     :filter-method="myFilterMethod"
     :selected.sync="selected"
     :separator="separator"
     :expanded.sync="expanded"
   >
...
     <!-- TABLE BODY SLOT SECTION -->
     <template v-slot:body="props">
       <q-tr :props="props">
         <q-td auto-width>
           <q-toggle
             dense
             v-model="props.selected"
           ></q-toggle>
           <q-btn
             size="sm"
             color="secondary"
             round
             dense
             class="q-ml-md"
             @click="props.expand = !props.expand"
             :icon="props.expand ? 'remove' : 'add'"
           >
             <q-tooltip>
               {{ $t('accountCol.domain.ttExpansion') }}
             </q-tooltip>
           </q-btn>
         </q-td>
         <q-td
           v-for="col in props.cols"
           :key="col.name"
           :props="props"
         >
           {{ col.value }}

           <q-popup-edit
             v-model="col.value"
             buttons
           >
             <q-input
               v-model="col.value"
               :type="col.type"
               dense
               autofocus
             />
           </q-popup-edit>
         </q-td>
       </q-tr>
...

these are my columns:

computed: {
  data () {
    return this.$store.state.accounts.data
  },
  countActive () {
    return this.$store.getters["accounts/activeAccountsCount"]
  },
  countInActive () {
    return this.$store.getters["accounts/inactiveAccountsCount"]
  },
  columnsI18n () {
    let columns = [{
      name: 'Idx',
      label: 'Idx',
      align: 'center',
      field: row => row.Idx,
      type: 'number'
    }, {
      name: 'active',
      label: this.$t('txtActive'),
      align: 'center',
      format: val => val == 1 ? '☑' : '☐',
      field: row => row.active,
      type: 'number'
    }, {
      name: 'domain',
      align: 'left',
      label: this.$t('accountCol.domain.Label'),
      format: val => `${val}`,
      field: row => row.domain,
      sortable: true,
      type: 'text'
    }, {...

Now every when click on a cell starting the q-input I see the proper value, but when I change something there, I got immediately this error:

Error in v-on handler: “TypeError: setting getter-only property “value””

Any ideas what I’m doing wrong or what is missing exactly?

Or better question: how can here the right mutations of the vlaue in my vuex store?
Unfortunately I am not able to find an complete example out there.

[Shoooryuken]

Hi,
i’m not an expert, but, i dont think you understand how vuex can help you.
first, i dont think to get data directly by state is really good.
second,you cant change your data directly.

https://forum.quasar-framework.org/topic/3607/solved-qpopupedit-in-qtable-with-vuex-data-source-do-not-emitted-save-event
this post can help you more than me good luck

[donsherman]

Meanwhile i did some more investigations on that and achieved, that all state.data got its ‘setters’ and ‘getters’:

import Vue from "vue";
import { date, Notify } from "quasar";
import { createHelpers } from "vuex-map-fields";

const { mapFields } = createHelpers({
  getterType: "accounts/getDataField",
  mutationType: "accounts/updateDataField"
});
export default {
 computed: {
    ...mapFields(
      [].concat(
        Vue.prototype.globalConst.accounts.visibleColumns,
        Vue.prototype.globalConst.accounts.visibleExpandColumns
      )
    ),
    accList: {
      get() {
        return this.$store.state.accounts.accList;
      },
      set(newData) {
        this.$store.dispatch("accounts/updateData", newData);
      }
    },
...

state.js

export default function() {
  return {
    accList: []
 }
}

getter.js

import { getField } from "vuex-map-fields";
export const activeAccounts = state => (arg = 0) => {
  return state.accList.filter(dat => dat.active == arg);
};
export function activeAccountsCount(state, getters) {
  return getters.activeAccounts(1).length;
}
export function inactiveAccountsCount(state, getters) {
  return getters.activeAccounts(0).length;
}
export function getDataField(state) {
  console.log(state.accList);
  return getField(state.accList);
}

mutation.js

import { updateField } from "vuex-map-fields";
export function setData(state, dat) {
  state.accList = dat;
}
export function updateDataField(state, field) {
  console.log(field);
  updateField(state.accList, field);
}

The problem is (imho) , that i want to use row Expansion together with Q-Popup-Edit / Q-Input

So therefore, i have to mange this in a v-for loop inside slot:body (of course, I’m nort 100% sure here)

...
 <q-td v-for="col in props.cols" :key="col.name" :props="props">
     {{ col.value }}
     <q-popup-edit v-model="col.value" buttons>
         <q-input v-model="col.value" :type="col.type" dense autofocus />
     </q-popup-edit>
  </q-td>
...

and apprently “col.value” isn’t the right v-model for that apporach