點擊chkGroup的checkbox,聯動 form-group下面的checkbox 選中或不選中url
<template v-for="(i,item) in items"> <div class="group"><input name="chkGroup" type="checkbox" value="checkbox" v-model="item.check" v-on:click="check(i)">{{item.name}}</div> <div class="row"> <div class=" form-group" v-for="(index, child) in item.child"> <input type="checkbox" name="action_code[]" value="{{child.unique}}" id="{{child.unique}}" class="checkbox" v-model="child.check" />{{child.name}}</div></div> </template>
var vm = new Vue({ el: '#content', data: { items:{"1":{"id":1,"name":"商品管理","letter":"goods","check":"","child":[{"cid":1,"letter":"goods","cname":"商品管理","id":1,"name":"商品管理","columnid":1,"unique":"goods\/index","url":"","show":1,"top":0,"rank":1,"check":"false"},{"cid":1,"letter":"goods","cname":"商品管理","id":2,"name":"添加商品","columnid":1,"unique":"goods\/add","url":"","show":1,"top":0,"rank":1,"check":"false"},{"cid":1,"letter":"goods","cname":"商品管理","id":3,"name":"商品分類","columnid":1,"unique":"goods\/category","url":"","show":1,"top":0,"rank":1,"check":"false"},{"cid":1,"letter":"goods","cname":"商品管理","id":4,"name":"品牌管理","columnid":1,"unique":"brand\/index","url":"","show":1,"top":0,"rank":1,"check":"false"}]},"9":{"id":9,"name":"系統設置","letter":"system","check":"","child":[{"cid":9,"letter":"system","cname":"系統設置","id":5,"name":"後臺菜單","columnid":9,"unique":"action_column\/index","url":"","show":1,"top":0,"rank":1,"check":"false"}]},"8":{"id":8,"name":"權限管理","letter":"role","check":"","child":[{"cid":8,"letter":"role","cname":"權限管理","id":6,"name":"管理員列表","columnid":8,"unique":"admin_user\/index","url":"","show":1,"top":0,"rank":1,"check":"false"},{"cid":8,"letter":"role","cname":"權限管理","id":7,"name":"分組管理","columnid":8,"unique":"admin_role\/index","url":"","show":1,"top":0,"rank":1,"check":"false"}]}}, }, methods: { check: function (i) { var item=vm.items[i]; for (x in item.child){ if(item.check){ item.child[x].check=flase; }else{ item.child[x].check=true; } } } } });