title: Vuejs checkbox grouping select all
body: <p>I have an Array of objects which have been divided into groups. each group has their own items and I need to check all the child check boxes if parents are checked and uncheck if parents are not checked. also if selectAll checked all groups and group items should be checked</p>
  <p>what I want to achieve is the same as this example</p>
  <p><a href="https://i.stack.imgur.com/nBJaT.gif" rel="nofollow noreferrer">selectall.gif</a></p>
  <p>I've <a href="https://jsfiddle.net/Hafizu/y2dw1ugk/22/" rel="nofollow noreferrer">jsfiddle</a> setup here, and this what I've done so far.</p>
  <p>Data</p>
  <pre><code>const groups = [
     {
        id: 1,
        name: &quot;TEST A&quot;,
        items: [
           { id: 1, name: &quot;item 1&quot; },
           { id: 2, name: &quot;item 2&quot; }
        ]
     },
     {
        id: 2,
        name: &quot;TEST B&quot;,
        items: [
           { id: 3, name: &quot;item 1&quot; },
           { id: 4, name: &quot;item 2&quot; }
        ]
     }
  ]
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;div id=&quot;app&quot;&gt;
    &lt;div&gt;
      
      &lt;input type=&quot;checkbox&quot; class=&quot;mb-2&quot; v-model=&quot;selectAll&quot; /&gt; select all
      
      &lt;div v-for=&quot;group in groups&quot; :key=&quot;group.id&quot; class=&quot;mb-2&quot;&gt;
  
        &lt;input
          type=&quot;checkbox&quot;
          v-model=&quot;selectedGroups&quot;
          :value=&quot;group.id&quot;
        /&gt;
        
        &lt;b&gt;{{ group.name }}&lt;/b&gt;
  
        &lt;c-item 
          v-for=&quot;item in group.items&quot;
          :item=&quot;item&quot;
          :key=&quot;item.id&quot;
          @change=&quot;onChangeItem&quot;
          :checked=&quot;selectedItems.includes(item.id)&quot;
        /&gt;
  
      &lt;/div&gt;
      
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;template id=&quot;x-item&quot;&gt;
    &lt;div&gt;
    
      &lt;input 
       type=&quot;checkbox&quot;
       @change=&quot;$emit('change', item.id, $event)&quot;
       :value=&quot;item.id&quot;
       :checked=&quot;checked&quot;
      /&gt;
      {{ item.name }}
      
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>JS</p>
  <pre><code>Vue.component('c-item', {
      props: ['item', 'checked'],
    template: &quot;#x-item&quot;,
  })
  
  new Vue({
    el: &quot;#app&quot;,
    data: {
      selectedItems: [],
      selectedGroups: [],
      groups: [
         {
            id: 1,
            name: &quot;TEST A&quot;,
            items: [
               { id: 1, name: &quot;item 1&quot; },
               { id: 2, name: &quot;item 2&quot; }
            ]
         },
         {
            id: 2,
            name: &quot;TEST B&quot;,
            items: [
               { id: 3, name: &quot;item 1&quot; },
               { id: 4, name: &quot;item 2&quot; }
            ]
         }
      ]
    },
    methods: {
          onChangeItem(itemId, $event) {
        if ($event.target.checked) this.selectedItems.push(itemId);
        else {
          const index = this.selectedItems.findIndex(c =&gt; c === itemId);
          if (index &gt;= 0) this.selectedItems.splice(index, 1);
        }
      }
    },
    computed: {
      selectAll: {
        get() {
          return this.groups
            ? this.selectedGroups.length == this.groups.length
            : false;
        },
        set(value) {
          let selectedGroups = [];
  
          if (value) {
            this.groups.forEach(function(item) {
              selectedGroups.push(item.id);
            });
          }
  
          this.selectedGroups = selectedGroups;
        }
      }
    }
  })
  </code></pre>
  <p>Can someone help me? Thank you in advance!</p>