前端之家

  1. 首页
  2. 问答

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

• 问答

我看到一个弹出窗口，显示您确定要删除这些数据吗？但是我想要的是我想进行 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 的数据

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

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

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>

laravelsweetalert2vue-componentvue.jsvuetify.js
本文链接：https://www.f2er.com/3600.html

大家都在问