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



  • 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.



  • 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



  • 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


Log in to reply