Vue Sample(權限)

權限範例

by cactus77kiki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">  
  <select v-model="seletion" v-on:change="changeuser" >
    <option v-for="(item,index) in authority[0].person"
            v-bind:value="item.id">
      {{ item.name }}
    </option>
  </select>
  所屬群組：{{groupname}}
  <br/><br/><br/>
  <input type="button" value="新增" v-show="isAdd" class="btn"/>
  <input type="button" value="刪除" v-show="isDel" class="btn"/>
  <input type="button" value="修改" v-show="isMod" class="btn"/>
  <input type="button" value="查詢" v-show="isQuy" class="btn"/>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.btn {
  width: 50px;
  background-color: LightGray;
}

Vue

var vueapp = new Vue({
  el: "#app",
  data: {
    seletion:"2",    
    isAdd: "N",
    isDel: "N",
    isMod: "N",
    isQuy: "N",
    groupname:"",
    authority:[
    {
 person: [
    {
    id: 1,
    name: "A",
    Group: {
      GroupName:"GuestGroup",
      Add:"N",
      Del:"N",
      Mod:"N",
      Query:"Y"
    }},
    {
    id: 2,
    name: "B",
    Group: {
      GroupName:"AdminGroup",
      Add:"Y",
      Del:"Y",
      Mod:"Y",
      Query:"Y"  
    }},
    {
    id: 3,
    name: "C",
    Group: {
      GroupName:"SaleGroup",
      Add:"Y",
      Del:"N",
      Mod:"Y",
      Query:"Y"  
    }}
  ]  
}
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    },
    changeuser: function(){
      //console.log(this.seletion);  
      var data = this.authority[0].person;
      /*var finddept = jQuery.grep(data, function (item) {
      	return item.id == this.seletion;
			});*/
      var finddata = findObjectByKey(data,"id",this.seletion);
      
      /*console.log(finddata.Group.Add);
      console.log(finddata.Group.Del);
      console.log(finddata.Group.Mod);
      console.log(finddata.Group.Query);*/
      this.isAdd = finddata.Group.Add == "Y" ? true : false;
      this.isDel = finddata.Group.Del == "Y" ? true : false;
      this.isMod = finddata.Group.Mod == "Y" ? true : false;
      this.isQuy = finddata.Group.Query == "Y" ? true : false;
      this.groupname = finddata.Group.GroupName;
    }
  },
  created:function(){
  	//this.seletion = "1";
  	//var test = this.authority[0].person;
    //console.log(test);
    var data = this.authority[0].person;
    var finddata = findObjectByKey(data,"id",this.seletion);
    	this.isAdd = finddata.Group.Add == "Y" ? true : false;
      this.isDel = finddata.Group.Del == "Y" ? true : false;
      this.isMod = finddata.Group.Mod == "Y" ? true : false;
      this.isQuy = finddata.Group.Query == "Y" ? true : false;
      this.groupname = finddata.Group.GroupName;
  }
 ...