将甜蜜警报与Vue.js配合使用时出现的问题

this.$nextTick(() => {
  Swal.fire({
    title: '成功',
    text: '操作已完成',
    icon: 'success'
  });
});

methods: {
  showAlert() {
    Swal.fire({
      title: '确认',
      text: '你确定要执行此操作吗？',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    }).then((result) => {
      if (result.isConfirmed) {
        this.performAction();
      }
    });
  },
  performAction() {
    // 执行具体操作
  }
}

<template>
  <div class="my-component">
    <button @click="showAlert">显示警报</button>
  </div>
</template>

<script>
export default {
  methods: {
    showAlert() {
      Swal.fire({
        title: '成功',
        text: '操作已完成',
        icon: 'success'
      });
    }
  }
}
</script>

<style scoped>
.my-component button {
  /* 自定义按钮样式 */
}
</style>

<template>
  <div class="my-component">
    <button @click="showAlert">显示警报</button>
  </div>
</template>

<script>
import Swal from 'sweetalert2';

export default {
  methods: {
    showAlert() {
      this.$nextTick(() => {
        Swal.fire({
          title: '成功',
          text: '操作已完成',
          icon: 'success'
        });
      });
    }
  }
}
</script>

<style scoped>
.my-component button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>