How do make an axios call inside sweet alert popup on delete and show the data in dropdown inside popup?

Question

I get a popup showing are you sure you want to delete this data? But what I want is I want to make an Axios call and fetch data inside that popup, asking where do you want to shift the data related to that data inside ? I want to Show the dropdown in that delete pop up of sweetalert showing message , where do you want to shift the content related to beacon? and show the dropdown containing the beacons that i am getting from that axios call

deleteBeacon(beacon) {
      swal({
        title: "Are you sure?",
        text: "Do you really want to delete this beacon?",
        icon: "warning",
        buttons: true,
        dangerMode: true,
      })
        .then((willDelete) => {
          if (willDelete) {
            return axios.delete("/beacons/" + beacon.id);
          } else {
            swal("Cancelled", "Beacon is safe!", "error");
          }
        })
        .then((response) => {
          swal("Success", response.data.message, "success");
          this.beacons.splice(this.editedIndex, 1);
          this.closeDelete();
        })
        .catch((err) => {
          if (err.response.status == 401) {
            self.$router.push("/login");
          } else if (err.response.status == 404) {
            swal(
              "Error",
              "Beacon does not exists or has been recently removed!",
              "error"
            );
          }
        });
    },

This is my delete icon sweetalert popup,

axios.get('/beacons?centerId='+this.form.center_id+'&without='+this.$route.params.id)

This is the Axios URL to hit and fetch data, I want to show the data coming from hitting this URL in that sweet alert popup

Answer 1

You can create a template that hides by default to display what you want to show in the popup

import swal from "sweetalert";

export default {
  name: "App",
  data: function() {
    return {
      beaconsInfos: [],
      isShowSwalTemplate: false,
    };
  },
  methods: {
    fakeGetBeaconsInfo: function(fakeId) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve([{
              value: "first_" + fakeId,
            },
            {
              value: "second_" + fakeId,
            },
            {
              value: "third_" + fakeId,
            },
          ]);
        }, 1000);
      });
    },
    deleteBeacon: function() {
      const fakeBeacon = {
        id: +new Date(),
      };

      this.fakeGetBeaconsInfo(fakeBeacon.id).then((beaconsInfos) => {
        // refresh dropdown source
        this.beaconsInfos = beaconsInfos;

        // show popup
        swal(this.$refs["swal-template"]);
        this.isShowSwalTemplate = true;
      });
    },
  },
};

<template>
  <div>
    <button @click="deleteBeacon">delete beacon</button>

    <div v-show="isShowSwalTemplate" ref="swal-template">
      <select>
        <option v-for="beaconsInfo in beaconsInfos" :key="beaconsInfo.value">
          {{ beaconsInfo.value }}
        </option>
      </select>
    </div>
  </div>
</template>