JSFiddle - React, Tailwind, and code Playground

by StpFlp_DDK

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="app">
  <modal-decision v-on:decision="handleDirectImport" modal-button-text="title 1" modal-title="Title 1" modal-body="Content 1" modal-ref="modal1" ref="modal1"></modal-decision>
  <modal-decision v-on:decision="handleDirectImport" modal-button-text="title 2" modal-title="Title 2" modal-body="Content 2" modal-ref="modal2"  ref="modal2" ></modal-decision>
</div>

<template id="example-modal">
  <div>
    <button type="button" class="btn btn-primary" @click="showModal()">
      {{ modalButtonText}}
    </button>

    <!-- Modal -->
    <div class="modal fade" ref="exampleModal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">{{ modalTitle }}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            {{ modalBody}}
          </div>
          <div class="modal-footer">

            <button type="button" class="btn btn-success" @click="clickYes('yes')">ja</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">nee</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

CSS

#app {
  padding: 20px;
}

JavaScript

Vue.component('modal-decision', {
  template: '#example-modal',
  props: {
    modalTitle: String ,
    modalBody: String,
    modalButtonText: String,
    modalRef: String
  },
  methods: {
  	showModal() {
     let element = this.$parent.$refs[this.modalRef].$refs.exampleModal
      $(element).modal('show') 
    }
  }
})

new Vue({
  el: '#app',
  methods: {
    handleDirectImport() {
			//something
    }
  }
})