vue.js+bootstrap modal範例

model: component

by cactus77kiki

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="vapp">  
  <h2>Data:</h2>
  <ol>
    <li  v-for="(row,index) in arryVal">
      <button v-on:click="getone(row.id)" class="btn btn-warning btn-xs">
        <span class="glyphicon glyphicon-search"></span> Detail
      </button>
      {{row.title}}
    </li>
  </ol>
  <div id="dsingle" class="modal" role="dialog" data-keyboard="false" data-backdrop="static">
   <modal-ele v-on:close="closemodal" v-bind:prgid="pgidVal" v-bind:prgtitle="pgtitleVal" v-bind:prgsubtitle="pgsubtitleVal">
      <div slot="mdbody" class="modal-body ">
        <div>
          <span class="stitle">Id：</span>
          <span>{{singleVal.id}}</span>
        </div>
        
        <div>
          <span class="stitle">title：</span>
          <span>{{singleVal.title}}</span>
        </div>
        
        <div>
          <span class="stitle">body：</span>
          <span>{{singleVal.body}}</span>
        </div>
      </div>
      <div slot="mdfoot" class="modal-footer ">
        <button class="btn btn-primary btn-sm" v-on:click="confirm">
          <span class="glyphicon glyphicon-ok"></span> Confirm
        </button>
        <button class="btn btn-sm" v-on:click="cancel">
          <span class="glyphicon glyphicon-remove"></span> Cancel
        </button>
      </div>
    </modal-ele>
  </div>
</div>

CSS

li {
  margin: 8px 0;
}

span.stitle{
  font-weight: bold;
}

/*title 作業名稱與功能鈕*/
.titletable {
    width: 98%;
    /*width:1000px;*/
}

    .titletable tr, .titletable td {
        border-width: 0px;
    }

        .titletable td.tdtitle {
            text-align: left;
        }

        .titletable td.tdfuncs {
            text-align: right;            
        }

JavaScript

/*
ref: https://jsfiddle.net/cactus77kiki/3rbcy8zn/2/
*/
Vue.component('modal-ele', { 
    /* prgid: 作業代碼名稱 /prgtitle: 作業名稱 /prgsubtitle: sub作業名稱 */
    props:
        ['prgid', 'prgtitle', 'prgsubtitle'],
    template:
        `<div class="modal_wrapper">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" v-on:click="$emit(\'close\')">&times;</button>
                        <table class="titletable">
                            <tr>
                                <td class = "tdtitle" style="width:40%;">【{{ prgid }} {{ prgtitle }} - {{ prgsubtitle }}】</td>                               
                            </tr>
                        </table>
                    </div>
                    <slot name="mdbody"></slot>
                    <slot name="mdfoot"></slot>
                </div>                
            </div>
        </div>`    
});

var app = new Vue({
	el:'#vapp',
  data:{
  	msg: 'test',
    showModal: false,
    pgidVal: "PGD001",
    pgtitleVal: "XXXFunction",
    pgsubtitleVal: "Query",
    arryVal:[],	//all data
    singleVal:[]	//single data
  },
  watch:{
  	showModal: function () {
    	if (this.showModal == false) {
      	$("#dsingle").modal('hide');
      } else {
        $("#dsingle").modal('show');
      }
    }
  },
  methods:{
  	//關閉
  	closemodal: function(){
    	this.showModal = false;
    },
    confirm: function(){
    	console.log("confirm action");
      this.showModal = false;
    },
    cancel: function(){
    	console.log("cancel action");
    	this.showModal = false;
    },
  	getdata: function(){
    	var serviceURL = 'https://jsonplaceholder.typicode.com/posts';
      var self = this;
      axios.get(serviceURL).then(function (Result) {
      	if (Result.data) {        	
        	self.arryVal = Result.data;
        } else {
					alert('read...