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

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

    Help
    2
    3
    381
    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.
    • donsherman
      donsherman last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • Shoooryuken
        Shoooryuken last edited by

        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

        1 Reply Last reply Reply Quote 0
        • donsherman
          donsherman last edited by

          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

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