I’d tried to make a component from this “q-popup-edit” section below (cause I’ll need them more than once):
But after hours of trial&error still without any success.
So my question is: Will this be somehow possible and how?

<q-td
  v-for="col in props.cols"
  :key="col.name"
  :props="props">

 {{ col.value }}

<q-popup-edit
  v-if="['Mail1', 'Mail2'].includes(col.name)"
  :value="col.value"
  @input="v => (vm[col.name] = v)"
  @save="(v, i) => updateCell(v, i, props.row, col.name)"
  @before-show="() => cpRow(props.row)"
   buttons
  :validate="validateMail">
     <q-input
        v-model="vm[col.name]"
        :type="col.type"
         counter
         clearable
         maxlength="80"
         dense
         autofocus
        :rules="[ val => !!val || $t('txtRequired'),isValidEmail ]"
     />
</q-popup-edit> 
...

The methods “validateMail” and “isValidEmail” are yet located in the component file.
But “updateCell” and “cpRow” are methods used in the vue file in which i want to use the component.
( vm returns only this pointer )

Where I got problems in how to get the v-model set in the component, so that i’ll be able to use
somewhere “this.$emit()” somehow and furtheron on how to treat with the event callbacks @save and @before-show ?

Any suggestions? Thx.

I got the same issue now like @sontis (of course while I have the same apporach). Is there meanwhile a solution now?
There is no save event emitted by PopupEdit, if there is no :value and no :input handler in q-input avauilable.
But that’s the problem, because q-input cannot mutate only the store (and even not directly)

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

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.

Thanks. But how can I combine it with the selection all q-toggle in the header section?
To have both: a q-toggle to select all rows and a q-toggle to expand all rows?

Is there somehow a possibility to put another q-toggle into a q-tables header for expanding all rows at once?

Beside a q-toggle to select all

<template v-slot:header-selection="scope">
       <q-toggle v-model="scope.selected" />
</template>

The problem is: how to get ‘props’ into here? Or do i need a complete another approach to do that?

Thx, do you mean something like this:

          <template v-slot:selected-item="scope">
            {{scope.opt.label}}
            <!-- <q-icon :name="scope.opt.icon" />  -->
            <img :src="scope.opt.icon" /> 
            <!-- <q-avatar :icon="scope.opt.icon" /> -->

          </template>

instead of v-slot:append ?
(only the img tag works. The other ones in rem. doesn’t hit)

The issue now is, that flag is tacked right beside the language text.
How get it right-aligned? (as the outline_flag above)

Furtheron appreciating any hints.

Edit: something like this, did the remedy:

<img
   :src="scope.opt.icon"
    class="q-pl-lg"
/>

Unfortunately will take quite a long time, until all these quasar shortcuts will flow…

Hello
in want to have in q-select choice the icon which is listed in the selection itself. As depicted here:

At the moment I have this:

<template v-slot:append>
     <q-icon
          name="outlined_flag"
          class="text-white"
       />
 </template>
 <template v-slot:option="scope">
      <q-item
              v-bind="scope.itemProps"
              v-on="scope.itemEvents"
       >
          <q-item-section>
                <q-item-label v-html="scope.opt.label" />
          </q-item-section>
          <q-item-section side>
                <img :src="scope.opt.icon" />
            </q-item-section>
      </q-item>
</template>

How may I change the static outline_flag with the proper icon the user had choosed?
Appreciating any hints.
BR