vue - 取消选中父级时取消选中所有子复选框答案

【问题标题】：vue - uncheck all child checkboxes when parent is uncheckedvue - 取消选中父级时取消选中所有子复选框
【发布时间】：2022-11-11 01:44:01
【问题描述】：

我正在使用 vue.js 开发一个菜单权限项目。我有一些子菜单这是不同的孩子菜单.我想要取消选中所有检查子菜单如果菜单未选中

// New VueJS instance
var app = new Vue({
  el: "#app",
  data() {
    return {
      menus: [{
        id: 1,
        menuName: "Tech 1"
      }, {
        id: 2,
        menuName: "Tech 2"
      }, {
        id: 3,
        menuName: "Tech 3"
      }],
      selectedMenu: [{
        id: 1,
        menuName: "Tech 1"
      }],
      selectedSubMenu: [{
        id: 1,
        menuId: 1,
        subMenuName: "architecture"
      }, {
        id: 2,
        menuId: 1,
        subMenuName: "Electrical"
      }],
      selectedAllSubMenu: [],
      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: {
    isUserInPreviousUsers() {
      return this.previousUsers.indexOf(this.userId) >= 0;
    },
  },
  methods: {
    filteredProduct(id) {
      return this.submenus.filter(s => s.menuId === id)
    },
    selectSubMenu(id) {
      if (this.selectedSubMenu.filter(s => s.menuId === id).length === this.submenus.filter(s => s.menuId === id).length) {
        this.selectedAllSubMenu.push(id)
      } else {
        this.selectedAllSubMenu = this.selectedAllSubMenu.filter(s => s !== id)
      }
    },
    selectAllSubMenu(id) {
      const checked = this.selectedAllSubMenu.some(s => s === id)
      if (this.selectedSubMenu.filter(s => s.menuId === id).length === this.submenus.filter(s => s.menuId === id).length && !checked) {
        this.selectedSubMenu = this.selectedSubMenu.filter(s => s.menuId !== id)
      } else if (checked) {
        this.selectedSubMenu = [...new Set([...this.selectedSubMenu].concat(this.submenus.filter(s => s.menuId === id)))]
      }
    },
  }
});

<script src="https://unpkg.com/vue@2.2.0-beta.1/dist/vue.js"></script>
<div id="app">
  <table class="table">
    <thead>
      <tr>
        <th>Menu</th>
        <th>Submenu</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(menu,index) in menus" :key="menu.id">
        <td>
          <label>
            <input type="checkbox" :value="menu" v-model="selectedMenu" />{{ menu.menuName }}
          </label>
        </td>
        <td>
          <ul>
            <label>
              <input
                type="checkbox"
                :value="menu.id"
                v-model="selectedAllSubMenu"
                @change="selectAllSubMenu(menu.id)"
              />
             Select all
            </label>
            <li v-for="submenu in filteredProduct(menu.id)" :key="submenu.id">
              <input type="checkbox" :value="submenu" v-model="selectedSubMenu" @change="selectSubMenu(menu.id)" />
              <label>{{ submenu.subMenuName }} </label>
            </li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</div>

这里技术 1菜单＆建筑、电气子菜单已被选中。我想要取消选中当子菜单技术 1菜单未选中。如何做到这一点？

【问题讨论】：

提供 stackblitz 来修复

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

与子菜单一样，您可以过滤 selectedMenu 数组：

// New VueJS instance
var app = new Vue({
  el: "#app",
  data() {
    return {
      menus: [{id: 1, menuName: "Tech 1"}, {id: 2, menuName: "Tech 2"}, {id: 3, menuName: "Tech 3"}],
      selectedMenu: [{id: 1, menuName: "Tech 1" }],
      selectedSubMenu: [{id: 1,  menuId: 1, subMenuName: "architecture"}, {id: 2, menuId: 1, subMenuName: "Electrical"}],
      selectedAllSubMenu: [],
      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: {
    isUserInPreviousUsers() {
      return this.previousUsers.indexOf(this.userId) >= 0;
    },
  },
  methods: {
    filteredProduct(id) {
      return this.submenus.filter(s => s.menuId === id)
    },
    handleMenu(id) {
      if (!this.selectedMenu.find(s => s.id === id)) {
        this.selectedSubMenu = this.selectedSubMenu.filter(s => s.menuId !== id)
        this.selectedAllSubMenu = this.selectedAllSubMenu.filter(s => s !== id)
      }
    },
    selectSubMenu(id) {
      if (this.selectedSubMenu.filter(s => s.menuId === id).length === this.submenus.filter(s => s.menuId === id).length) {
        this.selectedAllSubMenu.push(id)
      } else {
        this.selectedAllSubMenu = this.selectedAllSubMenu.filter(s => s !== id)
      }
    },
    selectAllSubMenu(id) {
      const checked = this.selectedAllSubMenu.some(s => s === id)
      if (this.selectedSubMenu.filter(s => s.menuId === id).length === this.submenus.filter(s => s.menuId === id).length && !checked) {
        this.selectedSubMenu = this.selectedSubMenu.filter(s => s.menuId !== id)
      } else if (checked) {
        this.selectedSubMenu = [...new Set([...this.selectedSubMenu].concat(this.submenus.filter(s => s.menuId === id)))]
      }
    },
  }
});

<script src="https://unpkg.com/vue@2.2.0-beta.1/dist/vue.js"></script>
<div id="app">
  <table class="table">
    <thead>
      <tr>
        <th>Menu</th>
        <th>Submenu</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(menu,index) in menus" :key="menu.id">
        <td>
          <label>
            <input type="checkbox" :value="menu" v-model="selectedMenu" @change="handleMenu(menu.id)" />{{ menu.menuName }}
          </label>
        </td>
        <td>
          <ul>
            <label>
              <input
                type="checkbox"
                :value="menu.id"
                v-model="selectedAllSubMenu"
                @change="selectAllSubMenu(menu.id)"
              />
             Select all
            </label>
            <li v-for="submenu in filteredProduct(menu.id)" :key="submenu.id">
              <input type="checkbox" :value="submenu" v-model="selectedSubMenu" @change="selectSubMenu(menu.id)" />
              <label>{{ submenu.subMenuName }} </label>
            </li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：