HOW TO SELECT VUEJS CHECK ALL UNCHECK ALL CHECKBOXES

how-to-select-vuejs-check-all-uncheck-all-checkboxes.markdown

HOW TO SELECT VUEJS CHECK ALL UNCHECK ALL CHECKBOXES

A Pen by Edward Lance Lorilla on CodePen.

License.

index.html

<div class="container">      
  <div id="app">
    <h4>Names</h4>
    <div>
      <table class="table">
        <tr>
          <th><input type="checkbox" v-model="checkAll"></th>
          <th align="center">ID</th>
          <th align="center">Names</th>
        </tr>
        <tr v-for="lang in langs">
          <td>
            <input type="checkbox" v-model="checked" :value="lang.id" number>
          </td>
          <td> {{ lang.id }}</td>
          <td> {{ lang.name }}</td>
        </tr>
      </table>
    </div>
  </div>
</div>

script.js

new Vue({
  data: {
    langs: [ 
    { "id": "1", "name": "Edward"},
      { "id": "2", "name": "Lance"},
      { "id": "3", "name": "Arellano"},
      { "id": "4", "name": "Lorilla"},
      ],
    checked: []
  },
  computed: {
    checkAll: {
      get: function () {
        return this.langs ? this.checked.length == this.langs.length : false;
      },
      set: function (value) {
        var checked = [];
        if (value) {
          this.langs.forEach(function (lang) {
            checked.push(lang.id);
          });
        }
        this.checked = checked;
      }
    }
  }
}).$mount('#app');

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

vdzvzw.markdown

VdzVzw

A Pen by Edward Lance Lorilla on CodePen.

License.

hello Edward thank you for thsi solution
I would appreciate it if you can convert this code to Vue 3 with setup script