passing reactive props to $scopedSlots component wrapper

[felek]

Hello i create component like so: its based on q-table.

Component

<template>
  <div>
    <q-table
      :title="myTitle"
      :data="myData"
      :columns="myColumns"
      :row-key="myKey"
      :grid="myGrid"
    >
      <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
        <slot :name="name" v-bind="data"></slot>
      </template>
    </q-table>
  </div>
</template>

Some times i wish to use scoped slots and use props like so:

<template #item="props">
          <div
            class="q-table__grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3"
            style="padding: 15px"
          >
            <q-card>
              <q-card-section>
                <q-item
                  clickable
                  tag="a"
                  target="_blank"
                  :href="props.row.name"
                  >{{ props.row.name }}</q-item
                >
              </q-card-section>
              <q-card-section>
                <q-btn
                  size="sm"
                  color="accent"
                  round
                  dense
                  @click="props.expand = !props.expand"
                  :icon="
                    props.expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
                  "
                ></q-btn>
                {{ props.expand }}
              </q-card-section>
            </q-card>
          </div>
        </template>

And it renders fine but expand props not working for me. I try pass :props=“props”(nearly every place to test it) with no results. What i might miss here ?

[metalsadman]

@felek said in passing reactive props to $scopedSlots component wrapper:

<q-table
:title=“myTitle”
:data=“myData”
:columns=“myColumns”
:row-key=“myKey”
:grid=“myGrid”
>
<template v-for="(index, name) in $scopedSlots" v-slot:[name]=“data”>
<slot :name=“name” v-bind=“data”></slot>
</template>
</q-table>

it’s a Vue js limitation, see https://github.com/vuejs/vue/issues/4332, also refer to some solutions here
https://stackoverflow.com/questions/50942544/emit-event-from-content-in-slot-to-parent

[felek]

ah ok so no work around thx :), there are if you look around, but i haven’t tested, and looks like a PITA to me.

[metalsadman]

@felek there are if you look in those threads, but looks like a PITA to work with imo. I see it kinda being implemented in this example https://quasar.dev/vue-components/select#Customizing-menu-options.

[Callo]

<q-table
    :title="myTitle"
    :data="myData"
    :columns="myColumns"
    :row-key="myKey"
    :grid="myGrid"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <!-- Slots pass-through: https://gist.github.com/loilo/73c55ed04917ecf5d682ec70a2a1b8e2#gistcomment-3121626 -->
    <template v-for="(_, name) in $scopedSlots" v-slot:[name]="scope">
      <slot :name="name" v-bind="scope" />
    </template>

    <template v-for="(_, name) in $slots" v-slot:[name]>
      <slot :name="name" />
    </template>
</q-table>

Have you tried passing thought listeners and props like this?

[felek]

@Callo I try with this. Not work for me.

<template v-for="(_, name) in $scopedSlots" v-slot:[name]="scope">
      <slot :name="name" v-bind="scope" />
    </template>

PROPS
    :title="myTitle"
    :data="myData"
    :columns="myColumns"
    :row-key="myKey"
    :grid="myGrid"
    v-bind="$attrs"
    v-on="$listeners"

[metalsadman]

@felek you’ll have to make use of events and explicit handler instead of changing the props directly inline then have the parent control the changes, also use the methods of qtable in it’s api docs setExpanded using a ref on your wrapper then targeting the child qtable. here https://codepen.io/metalsadman/pen/wvzJeZz?editors=1010

[felek]

One more think regarding to expand.
When in expand element i have

<q-input autogrow v-model="props.row.name" type="textarea" />

When i update value just keyup expand auto close why ? and can i prevent it ?

Possible workaround.
Example i can create tmp variable for input and change for submit but then i need to allow only one expand in table in the same time

[metalsadman]

@felek use a different key, something like a unique id, that happens since your row.name is what you’re using in your row-key, changing a key causes re-render. If it’s not what I assume, then please next time make a reproduction codepen.

[felek]

@metalsadman yeach true