Can't Run Vue Js Method from SweetAlert2 Pop up

Question

I have this vue js app with a pop up using SweetAlert2. There a link in the pop up message that needs to call a vue js method. But, i can't get it to work.

<template>
    <button @click="popModal()">Alert</button>
</template>

export default {
data(){
    return{
        popMessage: "<h5>Title</h5> 
        <p>I'm trying to call a vue js method on this link <a href='https://www.google.com' target='_blank' id='popLink' @click='run Method()'>google.com</a>. </p>"
     }
},
methods: {
  popModal(){
      this.$fire({
          html: message,
          showCancelButton: false
       })
  },
  runMethod(){
     console.log("Link in pop up!");
  }
}
}

Answer 1

I'm guessing:

• you're using Vue 2
• you've installed SweetAlert2 correctly and it adds a global method called $fire to your app.

---

If the above guesses are true, there are only two problems:

• popMessage in data contains line breaks, which break compilation. Either replace the double quotes (") with back-ticks (`), which will preserve the line breaks, or place each line inside double quotes and concatenate them.
• message is undefined . Did you mean this.popMessage ?

this.$fire({
  html: this.popMessage,
  showCancelButton: false
})

---

Side notes :

• nobody should have to guess anything when answering your questions; in the future, please provide all relevant details
• the browser console is your friend.
  It will help you figure out some errors on your own and it will also help you write better questions on StackOverflow. Providing a relevant console error/warning inside the question is likely to get you better answers, faster.