[Vuejs]-How to open a v-dialog from parent component

by

1👍

✅

I found a way to achieve what I am looking for. This question has lead me into the right direction. (EDIT: I found an even better way)

For anyone trying to achieve the same: You have to define the modelValue prop in the child component , create a computed value and assign in to the v-dialog as v-model and v-bind it to the modelValue of the v-dialog. Here is the result.

Parent component

<template>
    <div>
        <v-btn @click="toggleCustomSelection">Select</v-btn>

        <custom-selector v-model="showCustomSelector"></custom-selector>
    </div>
</template>

<script setup>
    import { ref } from 'vue'

    const showCustomSelector = ref(false);

    function toggleCustomSelection() {
        showCustomSelector.value = !showCustomSelector.value;
    }
</script>

Child component

<template>
    <v-dialog :model-value="modelValue">
        Some logic to displace the list and emit the selection

        <v-btn @click="close">Close</v-btn>
    </v-dialog>
</template>

<script setup>    
    const props = defineProps({ modelValue: Boolean });
    const emit = defineEmits(['update:modelValue']);

    function close() { emit('update:modelValue', false); }
</script>

Now if you want the child component to actually pass data to the parent, you can simply add additional emits to the child and listen to them in the parent.

👤KorbenDose

Leave a comment