Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

alexdicorp's avatar

v-model from parent in child slot

Hi guys! I wrote for a long time in Laravel + Blade. I using Vue.js 3 now. I have intresting problem now.

PartyDetails.vue - Components with fields for edit data Detail.vue - Base component with functions for get, post data

I would like create PartyDetails, OrderDetails components with edit components And Detail with base form template

What can i read?

It base component

And Edit Component

PartyDetails.vue
<script setup>
    const props = defineProps(['id']);
    import Details from "../../components/Details.vue";
    import InputText from "primevue/inputtext";
</script>

<template>
    <Details :id="props.id" url="parties">
        <div class="flex flex-col mb-2">
            <label for="model_n">Party number</label>
            <!--
                In blade i write $detail.model_n
                $detail - form name
                $model_n - fieldname
                Can i use it here (How ?)
                defineModel? defineEmits? or other...
                What can i read?
            -->
            <InputText id="model_n" type="text" v-model="{{ detail.model_n }}"/>
        </div>
    </Details>
</template>

Thanks

0 likes
1 reply
alexdicorp's avatar
alexdicorp
OP
Best Answer
Level 1

Done. Used v-slot="slotProps" Parent:

<Details :id="props.id" url="parties" v-slot="slotProps">
        <div class="flex flex-col mb-2">
            <label for="model_n">Party number</label>
            <InputText id="model_n" type="text" v-model="slotProps.detail.model_n"/>
        </div>
 </Details>

Child:

<slot :detail="detail"></slot>

Please or to participate in this conversation.