I am using vue-swal to display a dialog to the user. I have modified the usual swal in able to meet my desired functions and flow. While modifying, I have encountered error. I have 3 buttons in my swal and each button has specific functionality that need to be fired once a button was clicked. However, when I click the button, the handler function is not executed. I've tried to put a value on each button and used this as a variable to my condition. What did I miss?

Here is swal.

And my code

swal({
    title: `Checkpoint!`,
    html: `Some Text here.
           <br> <br> <b>
          Some text here?
               </b>
           <br> <br> <br> 
          <button type="button" value="a" class="btn swl-cstm-btn-yes-sbmt-rqst">Yes, Submit Request</button> 
          <button type="button" value="b" class="btn swl-cstm-btn-no-jst-prceed">No, Just proceed</button> 
          <button type="button" value="c" class="btn swl-cstm-btn-cancel" >Cancel</button>`,
   showCancelButton: false,
   showConfirmButton: false,
   }).then((result) => {
       if(result.value === 'a')
       { console.log('Yes, Submit Request was Clicked!') }
       else if(resule.value === 'b')
       { console.log('No, Just proceed was Clicked!') }
       else
       { console.log('Cancel was Clicked!') }
   })

I am using vue-swal to display a dialog to the user. I have modified the usual swal in able to meet my desired functions and flow. While modifying, I have encountered error. I have 3 buttons in my swal and each button has specific functionality that need to be fired once a button was clicked. However, when I click the button, the handler function is not executed. I've tried to put a value on each button and used this as a variable to my condition. What did I miss?

Here is swal.

And my code

swal({
    title: `Checkpoint!`,
    html: `Some Text here.
           <br> <br> <b>
          Some text here?
               </b>
           <br> <br> <br> 
          <button type="button" value="a" class="btn swl-cstm-btn-yes-sbmt-rqst">Yes, Submit Request</button> 
          <button type="button" value="b" class="btn swl-cstm-btn-no-jst-prceed">No, Just proceed</button> 
          <button type="button" value="c" class="btn swl-cstm-btn-cancel" >Cancel</button>`,
   showCancelButton: false,
   showConfirmButton: false,
   }).then((result) => {
       if(result.value === 'a')
       { console.log('Yes, Submit Request was Clicked!') }
       else if(resule.value === 'b')
       { console.log('No, Just proceed was Clicked!') }
       else
       { console.log('Cancel was Clicked!') }
   })

• javascript
• vue.js

• I would suggest using the Vue-ported version of this library though. – Yom T. Commented Feb 14, 2019 at 7:50
• @jom vue-ported version is also the same in the swal version. – MONSTEEEER Commented Feb 14, 2019 at 7:57
• Have a look at this demo for dynamically generated buttons sweetalert2.github.io#timer-functions. Basically, your buttons do not have those click handlers registered, unless you are initializing them with the buttons option. – Yom T. Commented Feb 14, 2019 at 8:01
• Have seen that but the demo is using jquery. Im using vue.js @jom – MONSTEEEER Commented Feb 14, 2019 at 8:04
• 1 You could use document.querySelector('.swl-cstm-btn-yes-sbmt-rqst') for that matter. Is the html content loaded from server though? Otherwise, why not use the standard buttons option? – Yom T. Commented Feb 14, 2019 at 8:05

1 Answer 1

Got an Idea to @jom

And now its working. Here what I used also from the documentation of Swal

Swal Multiple Button

Here is now my code.

swal({
title: `Checkpoint!`,
html: `Some Text here.
       <br> <br> <b>
      Some text here?
           </b>
       <br> <br> <br> 
      <button type="button" class="btn btn-yes swl-cstm-btn-yes-sbmt-rqst">Yes, Submit Request</button> 
      <button type="button" class="btn btn-no swl-cstm-btn-no-jst-prceed">No, Just proceed</button> 
      <button type="button" class="btn btn-cancel swl-cstm-btn-cancel" >Cancel</button>`,
showCancelButton: false,
showConfirmButton: false,
onBeforeOpen: () => {
     const yes = document.querySelector('.btn-yes')
     const no = document.querySelector('.btn-no')
     const cancel = document.querySelector('.btn-cancel')

     yes.addEventListener('click', () => {
         console.log('Yes was Cliked.')
     })

     no.addEventListener('click', () => {
         console.log('no was Cliked.')
     })

     cancel.addEventListener('click', () => {
         console.log('cancel was Cliked.')
     })
}
})