How to use Vue 3 slots as parameters without rendering it?

Question

In popular frameworks like PrimeVue or ElementPlus there is some sort of hack with slots when they are used like params for parent component, for example in DataTables. I'm trying to do something similar, but stuck with reactivity...

Currently in my parent component I have this:

<script setup>
import {onMounted, useSlots, watch, h, computed} from 'vue';
import { useDataTableStore } from '@/components/DataTable/DataTableStore';

const dataTableStore = useDataTableStore();
const slots = useSlots();

const props = defineProps({
    data: {
        type: Array,
        required: true,
    },
});

onMounted(() => {
    dataTableStore.orderAll = props.orderAll;
    dataTableStore.searchAll = props.searchAll;

    slots.default().forEach(s => {
        dataTableStore.columns.push({
            title: s.props.title,
            prop: s.props.prop ?? s.props.title,
            order: s.props.order ?? false,
            search: s.props.search ?? false,
            searchType: s.props['search-type'] ?? 'text',
            searchOptions: s.props['search-options'] ?? []
        });
    });
});
</script>

The main problem is that the props of slots are not reactive.

<DataTable
    :data="packagesStore.packages"
    :columns="columns"
    :search-all="true"
    :order-all="true"
    @on-filter="onFilter"
>
    <DataTableColumn
        title="Nr."
        prop="number"
        :search="false"
    />
    <DataTableColumn
        title="Wood"
        prop="wood.id"
        search-type="select"
        :search-options="classificatorsStore.quality"
    />
</DataTable/>

provided you with some clues, if it doesn't work i'll make some real coding tomorrow if nobody provides you with an answer — Alexander Nenashev, May 22 '23 at 21:58

score 0 · Answer 1 · answered May 22 '23 at 21:57

0

The problem that you don't even use the reactivity of the props. My bet computed could suit you:

const props = defineProps({
    data: {
        type: Array,
        required: true,
    },
});

const dataTableStore = computed(() => ({

    // why these props? we have only props.data as declared in defineProps()
    orderAll: props.orderAll, 
    searchAll: props.searchAll,

    // not sure about that, you can't have multiple slots with the same name I guess
    // needs investigation
    columns: slots.default().map(s => {
        return {
            title: s.props.title,
            prop: s.props.prop ?? s.props.title,
            order: s.props.order ?? false,
            search: s.props.search ?? false,
            searchType: s.props['search-type'] ?? 'text',
            searchOptions: s.props['search-options'] ?? []
        };
    });
}));

answered May 22 '23 at 21:57

Alexander Nenashev

8,775
2
6
17

`dataTableStore` is pinia. The problem is that `s.props` from slot comes not reactive. – Kin May 23 '23 at 06:23
the problem is much deeper as i see https://stackoverflow.com/a/73000029/1735099 – Kin May 23 '23 at 06:24
@Kin the problem you gave link for seems different. let me take my coffee and do some job duties. i'll return later – Alexander Nenashev May 23 '23 at 06:27
@Kin could you post the template that use this component (where slots are passed in HTML)? – Alexander Nenashev May 23 '23 at 06:28
Just updated my question – Kin May 23 '23 at 10:42

How to use Vue 3 slots as parameters without rendering it?

1 Answers1