建立系統選單

by cactus77kiki

HTML

<div id="vueapp" v-cloak class="container">

  <div class="btn-group" v-for="(main,index) in menuVal" class="col-md-12">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" >
    {{ main.menu }} 
    </button>
    <ul class="dropdown-menu" v-if="main.submenu" >
          
      <li v-for="child in main.submenu" v-bind:class="[(child.bar === 'Y') ? 'divider' : '']" >
        <span v-if="child.bar === 'Y'" ></span>
        <span v-else><a href="#">{{ child.name }}</a></span>
      </li>    
    </ul>  
  </div>   
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" 
  src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

JavaScript

//$(document).on('click', '.btn-primary', function () {
        //    alert("hi");
        //});

var app = new Vue({
	el: '#vueapp',
	data: {
      menuVal: []
  }
});

$(document).ready(function(){
	var data = {
		"menudata": [
    {"menu":"系統管理",
     "submenu":[
     		{"mIdx":1,
         "sIdx":1,
         "code":"GA00S00",
         "cat":"GA00",
         "name":"變更密碼",
         "link":"Misc/ChgPwd.aspx?prgid=GA00S00"
//         "bar":"Y"         
        },
        {"mIdx":1,
         "sIdx":2,
         "code":"GA00S98",
         "cat":"GA00",
         "name":"資料表文件",
         "link":"Table/TableDocFrame.htm?prgid=GA00S98"         
        },
        {
         "bar":"Y"  
        },
        {
         "mIdx":1,
         "sIdx":3,
         "code":"GA00S03",
         "cat":"GA00",
         "name":"使用者管理",
         "link":"SysUser/SysUserFrame.htm?prgid=GA00S03"         
        },
        {
				 "mIdx":1,
         "sIdx":4,
         "code":"GA00S04",
         "cat":"GA00",
         "name":"群組管理",
         "link":"system/APcatFrame.htm?prgid=GA00S04"         
        }
        ]},
    {"menu":"代碼維護",
     "submenu":[
        {"mIdx":2,
         "sIdx":1,
         "code":"AC09A01",
         "cat":"AC09",
         "name":"會計科目維護",
         "link":"AC09/AccountingFrame.htm?prgid=AC09A01"
//         "bar":"Y"         
        },
        {"mIdx":2,
         "sIdx":2,
         "code":"AC09A02",
         "cat":"AC09",
         "name":"單位預算維護",
         "link":"AC09/BranchBudgetFrame.htm?prgid=AC09A02"     
        },
     ]
    },
    {"menu":"代碼維護",
     "submenu":[
        {"mIdx":2,
         "sIdx":1,
         "code":"AC09A01",
         "cat":"AC09",
         "name":"會計科目維護",
         "link":"AC09/AccountingFrame.htm?prgid=AC09A01"
         //"bar":"Y"         
        },
        {"mIdx":2,
         "sIdx":2,
         "code":"AC09A02",
         "cat":"AC09",
         "name":"單位預算維護",
         "link":"AC09/BranchBudgetFrame.htm?prgid=AC09A02"        
        },
  ...