title: vue: Count and check checkboxes
body: <p>What I want to do with vue:</p>
  
  <ul>
  <li>Count checked checkboxes </li>
  <li>Set all checkboxes to checked (or uncheck all)</li>
  </ul>
  
  <p>This is a very simplified model. The real website contains the following contraints:</p>
  
  <ul>
  <li>The number of checkboxes changes.</li>
  <li>The values are always different.</li>
  <li>I do not want to put all the input-attribute into the data-section of
  Vue</li>
  </ul>
  
  <p>The following code allows to count the number of checked checkboxes.</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
      &lt;div id="app"&gt;
        &lt;input type="checkbox" name="abc" value=1 v-model="cch"&gt;
        &lt;input type="checkbox" name="abc" value=2 v-model="cch"&gt;
        &lt;br/&gt;
        Count: {{cch.length}}
      &lt;/div&gt;
  
      &lt;script&gt;
        new Vue({
            el: '#app',
            data: {
              cch: [],
            },
        })
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The following code checks all checkboxes (and, of course, unchecks the checkboxes if chk=false):</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
      &lt;div id="app"&gt;
        &lt;input type="checkbox" name="abc" value=1 :checked="chk"&gt;
        &lt;input type="checkbox" name="abc" value=2 :checked="chk"&gt;
        &lt;br/&gt;
        Checked: {{chk}}
      &lt;/div&gt;
  
      &lt;script&gt;
        new Vue({
            el: '#app',
            data: {
              chk: true
            },
        })
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It seems that it is not possible to use :checked and v-model in the same input-tag.
  What can I do?</p>
  
  <hr>
  
  <p>I have added a button to make all checkboxed checked and I have changed the names. The problems remain: the count works well, but the "all" button does not have any effect.</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
      &lt;div id="app"&gt;
        &lt;input type="checkbox" name="abc1" value=1 v-model="cch" :checked="chk"&gt;
        &lt;input type="checkbox" name="abc2" value=2 v-model="cch" :checked="chk"&gt;
        &lt;br/&gt;
        Count: {{cch.length}}
        &lt;br/&gt;
        &lt;input type="button" @click="chk=!chk" value="all"&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
        new Vue({
            el: '#app',
            data: {
              cch: [],
              chk: true
            },
        })
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>