JSFiddle - React, Tailwind, and code Playground

by jeffory

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/bulma.css">
<div id="app">
  <modal ref="delete_ticket">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dolorum earum, a, sunt possimus nemo accusamus blanditiis enim doloremque suscipit pariatur perferendis sit. Esse assumenda, corporis! Eos sequi, cupiditate ab!</p>
    <pre v-if="email" v-text="email"></pre>
  </modal>
  
  <button class="button is-primary" @click="$emit('showModal', {modal: 'delete_ticket', email: '[email protected]'})">Click me 1</button>

  <test inline-template>
    <button class="button is-primary" @click="$emit('showModal', {modal: 'delete_ticket', email: '[email protected]'})">Click me 2</button>
  </test>
</div>

CSS

body { padding: 1em }

JavaScript

Vue.component('modal', {
    template: '<div class="modal" :class="{\'is-active\': active}"><div class="modal-background"></div><div class="modal-content box"><slot dataset="dataset"></slot></div><button class="modal-close" @click="hide()"></button></div>',
    data() {
        return {
            active: false
        }
    },
    methods: {
        show(data) {
            //this.modal_data = Object.assign({}, data);
            Object.keys(data).forEach(function(key) {
              this.$add(key, data[key]);
            });
            this.active = true;
        },
        hide() {
            this.active = false;
        }
    }
});

Vue.component('test', {
	mounted: function mounted() {
  	this.$on('showModal', function(data) {
    	this.$parent.$emit('showModal', data);
    });
  }
});

new Vue({
	el: '#app',
  mounted: function mounted() {
  	this.$on('showModal', function(data) {
    	this.$refs[data['modal']].show(data);
    });
  }
});