link2192 link2193 link2194 link2195 link2196 link2197 link2198 link2199 link2200 link2201 link2202 link2203 link2204 link2205 link2206 link2207 link2208 link2209 link2210 link2211 link2212 link2213 link2214 link2215 link2216 link2217 link2218 link2219 link2220 link2221 link2222 link2223 link2224 link2225 link2226 link2227 link2228 link2229 link2230 link2231 link2232 link2233 link2234 link2235 link2236 link2237 link2238 link2239 link2240 link2241 link2242 link2243 link2244 link2245 link2246 link2247 link2248 link2249 link2250 link2251 link2252 link2253 link2254 link2255 link2256 link2257 link2258 link2259 link2260 link2261 link2262 link2263 link2264 link2265 link2266 link2267 link2268 link2269 link2270 link2271 link2272 link2273 link2274 link2275 link2276 link2277 link2278 link2279 link2280 link2281 link2282 link2283 link2284 link2285 link2286 link2287 link2288 link2289 link2290 link2291 link2292 link2293 link2294 link2295 link2296 link2297 link2298 link2299 link2300 link2301 link2302 link2303 link2304 link2305 link2306 link2307 link2308 link2309 link2310 link2311 link2312 link2313 link2314 link2315 link2316 link2317 link2318 link2319 link2320 link2321 link2322 link2323 link2324 link2325 link2326 link2327 link2328

[Vue.js] Custom swal button not firing their specific function

when using vue-swal to display a dialog to the user. there is modified the usual swal in able to meet my desired functions and flow. While modifying, there is encountered error. there is 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!’) }
})

Solution :

Got an idea from @jom and now it’s working.

Here’s what I used based from the documentation of swal 2.

Swal Multiple Button

Here is 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.’)
})
}
})