Vue菜单权限问题：单个复选框勾选触发其他同类型复选框

问题根源 #

你当前所有菜单的操作权限（Create/Edit/Delete）都绑定到同一个全局数组selectedActions，导致勾选任意菜单的操作复选框时，所有菜单的对应复选框都会同步变化——因为它们共享同一个数据源。

解决方案 #

为每个菜单单独分配独立的权限存储结构，让每个菜单的操作权限状态互不干扰。

修改后的代码 #

JavaScript部分

console.clear();

var app = new Vue({
  el: "#app",
  data: {
    menus: [
      { id: 1, menuName: "Tech 1", actions: { Create: false, Edit: false, Delete: false } },
      { id: 2, menuName: "Tech 2", actions: { Create: false, Edit: false, Delete: false } },
      { id: 3, menuName: "Tech 3", actions: { Create: false, Edit: false, Delete: false } }
    ],
    selectedMenu: [],
    selectedSubMenu: [],
    submenus: [
      { id: 1, menuId: 1, subMenuName: "architecture" },
      { id: 2, menuId: 1, subMenuName: "Electrical" },
      { id: 3, menuId: 1, subMenuName: "Electronics" },
      { id: 4, menuId: 2, subMenuName: "IEM" },
      { id: 5, menuId: 3, subMenuName: "CIVIL" }
    ]
  },
  computed: {
    filteredProduct: function () {
      const menu = this.selectedMenu;

      if (menu.includes("0")) {
        return this.submenus;
      } else {
        return this.submenus.filter(item => menu.indexOf(item.menuId) >= 0);
      }
    },
    // 可选：汇总所有已选中的权限，用于提交等场景
    allSelectedPermissions() {
      return this.menus.map(menu => ({
        menuId: menu.id,
        actions: Object.entries(menu.actions)
          .filter(([_, checked]) => checked)
          .map(([action]) => action)
      })).filter(item => item.actions.length > 0);
    }
  },
  methods: {
    setSelectedMenu: function (event, menu_id) {
      if (event.target.checked) {
        this.selectedMenu.push(menu_id);
      } else {
        var index = this.selectedMenu.indexOf(menu_id);
        this.selectedMenu.splice(index, 1);
      }
    }
  }
});

HTML部分

<!-- Include the library in the page -->
<script src="https://unpkg.com/vue@2.2.0-beta.1/dist/vue.js"></script>

<!-- App -->
<div id="app">
  <table class="table">
    <thead>
      <tr>
        <th>Menu</th>
        <th>Submenu</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="menu in menus" :key="menu.id">
        <td>
          <label>
            <input type="checkbox" :value="menu.id" v-model="selectedMenu" />{{ menu.menuName }}
          </label>
        </td>
        <td>
          <ul>
            <li v-for="submenu in filteredProduct" :key="submenu.id" v-if="menu.id == submenu.menuId">
              <input type="checkbox" :value="submenu.id" v-model="selectedSubMenu" />
              <label>{{ submenu.subMenuName }} </label>
            </li>
          </ul>
        </td>
        <td class="permission-action">
          <label class="btn bg-success">
            <input type="checkbox" v-model="menu.actions.Create" />Create</label><br />
          <label class="btn bg-primary">
            <input type="checkbox" v-model="menu.actions.Edit" />Edit</label><br />
          <label class="btn bg-danger">
            <input type="checkbox" v-model="menu.actions.Delete" />Delete</label>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- 可选：查看汇总的权限数据 -->
  <pre>{{ allSelectedPermissions }}</pre>
</div>

关键修改说明 #

1. 数据结构调整：在每个menu对象中新增actions属性，存储该菜单独立的Create/Edit/Delete权限状态，默认值为false（未勾选）。
2. 模板绑定修改：将操作复选框的v-model从全局的selectedActions改为当前菜单的menu.actions.Create、menu.actions.Edit、menu.actions.Delete，实现权限独立控制。
3. 可选汇总功能：新增allSelectedPermissions计算属性，自动收集所有已勾选的权限数据，方便后续提交或处理。

内容的提问来源于stack exchange，提问作者16_018_RHR