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 megood 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