如何在删除时在甜蜜警报弹出窗口中进行 axios 调用并在弹出窗口内的下拉列表中显示数据？

Posted 2023-02-23

【中文标题】如何在删除时在甜蜜警报弹出窗口中进行 axios 调用并在弹出窗口内的下拉列表中显示数据？

【英文标题】：How do make an axios call inside sweet alert popup on delete and show the data in dropdown inside popup?

【发布时间】：2021-10-06 22:20:23

【问题描述】：

我收到一个弹出窗口，显示您确定要删除此数据吗？但是我想要的是我想进行 Axios 调用并在该弹出窗口中获取数据，询问您要将与该数据相关的数据转移到哪里？我想在 sweetalert 显示消息的删除弹出窗口中显示下拉菜单，您想将与信标相关的内容转移到哪里？并显示包含我从该 axios 调用中获得的信标的下拉列表

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"
            );
          
        );
    ,

这是我的删除图标 sweetalert 弹出窗口，

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

这是点击和获取数据的 Axios URL，我想在那个甜蜜的警报弹出窗口中显示来自点击此 URL 的数据

【问题讨论】：

您可以等到下拉源获取后，再打开甜蜜警报弹出窗口。就像例子github.com/ms-s-rinivas/LinkedIn-Clone/blob/…

我很困惑，我应该如何在甜蜜警报中实际调用 axios？

【参考方案1】：

您可以创建一个默认隐藏的模板以在弹出窗口中显示您想要显示的内容

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>

【讨论】：

我想我无法让你理解我的问题。我想在 sweetalert 显示消息的删除弹出窗口中显示下拉菜单，您想将与信标相关的内容转移到哪里？并显示包含我从该 axios 调用中获得的信标的下拉列表

你的意思是像例子codesandbox.io/s/exciting-liskov-ofihk?file=/src/App.vue