Is there a way to use 2 alert components, one after another?

[Mary Heng]

Hi,

So basically what I want to do is show an alert saying "Do you want to delete this record?" --> Confirm or Cancel. If the user clicks "Confirm", another alert will appear and says "Successfully deleted!"
I'm having an issue where i'm unable to show the 2nd alert component which says "Successfully deleted."

HTML code:

      <!-- Simplert Notification -->
      <simplert 
        :useRadius="true"
        :useIcon="true"
        ref="simplert">
      </simplert>

This is my Vue code:

  methods: {
    deleteBtn () {
      let confirmFn = function () {
        let obj2 = {
          title: 'Success',
          message: 'Staff record successfully deleted!',
          type: 'success'
        }
        this.$refs.simplert.openSimplert(obj2)
      }
      let obj = {
        title: 'Warning',
        message: 'Are you sure you want to delete staff record?',
        type: 'warning',
        useConfirmBtn: true,
        onConfirm: confirmFn
      }
      this.$refs.simplert.openSimplert(obj)
    }
  }

The error is shown for obj2:
Uncaught TypeError: Cannot read property 'openSimplert' of undefined

How should I go about doing this?

Thank you!

[Irfan Maulana]

You can use hook onClose or onConfirm and show second alert

[Irfan Maulana]

You can change this to local variable so they can have wrong refer this, like this example :

 methods: {
    deleteBtn () {
      let self = this
      let confirmFn = function () {
        let obj2 = {
          title: 'Success',
          message: 'Staff record successfully deleted!',
          type: 'success'
        }
        self.$refs.simplert.openSimplert(obj2)
      }
      let obj = {
        title: 'Warning',
        message: 'Are you sure you want to delete staff record?',
        type: 'warning',
        useConfirmBtn: true,
        onConfirm: confirmFn
      }
      self.$refs.simplert.openSimplert(obj)
    }
  }

[Mary Heng]

Hi! I've done what you said about using

let self = this

and it works perfectly fine now.

Thank you for your help! 👍

[Irfan Maulana]

Anytime.
Don't forget to star this repo ya 😂

[Mary Heng]

Hi again!

I got another problem which i don't quite understand...

I have an error which says, "Cannot read property '$refs' of undefined".
Is this due to the conflicting this.$refs.image.files for the top part of the code?

Here is my Vue Code:

    submitStaff () {
      if (this.$refs.image.files[0]) {
        let formData = new FormData()
        formData.append('userImage', this.$refs.image.files[0])
        formData.append('name', this.data.name)
        formData.append('username', this.data.username)
        formData.append('password', this.data.password)
        axios.post('/testing', formData)
          .then(function (response) {
            let self = this
            let successAlert = {
              title: 'Success',
              message: 'Staff record successfully created!',
              type: 'success'
            }
            self.$refs.simplert.openSimplert(successAlert)
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    }

How do I go about fixing this problem?

Thank you for your help once again! (I starred this repo already 👍 )

[Irfan Maulana]

You can move

let self = this

To the bottom of exactly code

submitStaff () {

I think you need learn about this in Javascript, because this is standard of Javascript.
Not about this library. 😂

[Mary Heng]

I feel so silly now! Haha sorry, i'm new to javascript and vue :-) learning and doing a project at the same time. Thanks for your help! 👍

[Irfan Maulana]

No problem 👍