0

I have a very basic basic component

testcomponent

<template>
    <div class="test">
        <h1>testing</h1>
    </div>
</template>

Then i have a main component, where i have a button that, when pressed, should open a sweet alert and the content of the alert should be testcomponent.

I tried this:

<template>
  <v-btn @click="showAlert"
    outlined
    small
    tile
    style="color: white"
  >Open</v-btn>
</template>


<script>

export default {

  props:{
  },

  data() {
  },

  mounted() {
    },

  methods: {

    showAlert() {
      // Use sweetalert2
      this.$swal.fire({html: '<testcomponent></testcomponent>'});
    },

  }

}

</script>

The problem with this code is that the component is not loaded, i see a blank space. Is there any way to do this? Thanks in advance!

JayK23
  • 287
  • 1
  • 15
  • 49

0 Answers0