CODEWITHSUNDEEP
vue.jsvuejs2
user1
user1

Reputation: 4131

Vue.js: vue-alert component not rendering

import VueAlert from 'archer-vue-alert';
Vue.use(VueAlert); 

this.$alert({
  title: 'alertTitle',
  message: 'alertMessage', //message accepts string and raw_html
  confirmTxt: 'confirm btn txt' //default is 'OK'
}).then(function () {
  //...
})

I am sure that there is no problem with archer-vue-alert package, in fact, I used vue-alert package as well. Same problem. Why is the alert never displayed?

My package.json file:

"archer-vue-alert": "^2.0.2",
"onsenui": "^2.5.1",
"vue": "^2.4.2",
"vue-i18n": "^7.1.1",
"vue-infinite-scroll": "^2.0.1",
"vue-onsenui": "^2.1.0",
"vue-resource": "^1.3.4",
"vue-router": "^2.7.0",
"vuex": "^2.3.1"

Upvotes: 0

Views: 426

Answers (1)

thanksd
thanksd

Reputation: 55664

From your example, it looks like you are registering VueAlert as a plugin and then immediately attempting to display an alert by calling $alert() on this in the context of your main.js file.

Based on the archer-vue-alert package's README, $alert() should be called on a Vue instance.

Here's one example of correct usage:

import VueAlert from 'archer-vue-alert';
Vue.use(VueAlert); 

new Vue({
  el: '#app',
  created() {
    this.$alert({
      title: 'alertTitle',
      message: 'alertMessage',
      confirmTxt: 'confirm btn txt'
    })
  }
})

Upvotes: 1

Related Questions