Notification Vue component

Notification Vue component

by amitavroy

HTML

<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<div id="vue-app">
  <h1>{{ message }}</h1>
  <button v-on:click="handleButtonClick()">Click me</button>
  <notifier></notifier>

  <template id="notifier">
    <div class="notifier-wrapper" v-if="display">
      <p>This is a notification {{message}}</p>
    </div>
  </template>
</div>

JavaScript

var notifier = Vue.extend({
  template: '#notifier',
  events: {
  	showMessage () {
    	console.log('Show message')
      this.display = true
    }
  },
  data() {
    return {
      display: false,
      message: "Something"
    }
  }
})

Vue.component('notifier', notifier)

var app = new Vue({
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
  	handleButtonClick () {
	    console.log('Button')
      const data = {
      	type: 'error',
        message: 'Please fill in the details and try again'
      }
    	this.$broadcast('showMessage', data)
    }
  }
}).$mount('#vue-app')