javascript - Vue - how to load a component in a sweet alert?

Question

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!

question from:https://stackoverflow.com/questions/65858015/vue-how-to-load-a-component-in-a-sweet-alert

Answer 1

Waitting for answers