D
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
