1

I have a modal that have 2 slots, default slot and buttons slot, in the default slot i will set the content of the modal (in this case i will use an alert) and in buttons slot i will add some buttons (in this case a delete button).

Now i want to create a component that will contain the alert and the delete button mentioned before. but the alert will be in the default slot and the button in the buttons slot of the modal.

If i use the code below in the modal component like this, it will show the modal with the alert

<modal>
   <template v-slot:default>
      <v-alert type="warning" :value="true">
         ¿Are you sure you want to delete {{ text }}?
      </v-alert>
   </template>
   <template v-slot:buttons>
      <v-btn color="error" @click="clicked">Delete</v-btn>
   </template>
</modal>

Now what i want is to be able to just set a component inside the modal like this

     <modal :title="title" :show="show" @close="show = false">
         <modal-elim :text="'delete something'"></modal-elim>
     </modal>

I want to do this, so i can dynamically change the content of the modal in the future, and reuse the same modal layout.

As you can see the modal-elim component will have the alert and the button shown before, but they must apper in the slots of the modal component, i have tried this

<template>
    <div>
        <template v-slot:default>
            <v-alert type="warning" :value="true">
                ¿Estas seguro que deseas eliminar {{ text }}?
            </v-alert>
        </template>
        <template v-slot:buttons>
            <v-btn color="error" @click="clicked">Enviar</v-btn>
        </template>
    </div>
</template>

<template v-slot> can only appear at the root level inside the receiving the component

When i trie to wrap the elements inside the slot it throw an error

It is posible to add the parent slot iside the child component? How can i do that? How else can i do a workaround this?

in the ModalElim component? i have tried this but it throw an error.

Carlos Salazar
  • 1,818
  • 5
  • 25
  • 48
  • Can you please revised your problem again? I am trying hard to understand! – Varit J Patel Apr 01 '19 at 17:06
  • i have edited the cuestion, i just want to reuse the modal, using the modal slots and creating multiples components that can go inside the modal – Carlos Salazar Apr 01 '19 at 20:28
  • So, this can be achieved if you remove your by default model code ` ¿Are you sure you want to delete {{ text }}? ` & `Delete` from the `modelcomponent` and To make alert model component, pass value for that slot and same with button. Here is the [fiddle](https://jsfiddle.net/varit05/v47mx9uh/) for your reference. Let me know if it helps! – Varit J Patel Apr 02 '19 at 03:42

0 Answers0