JSFiddle - React, Tailwind, and code Playground

by zaurmag

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
  <div>
    <label>
      <input type="checkbox" v-model="all">
      ALL
    </label>
  </div>
  <div v-for="n in items" :key="n.id">
    <label>
      <input type="checkbox" :value="n.id" v-model="selected">
      {{ n.label }}
    </label>
  </div>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    items: [ 'hello, world!!', 'fuck the world', 'fuck everything' ].map((n, i) => ({
      id: i + 1,
      label: n,
    })),
    selected: [],
  },
  computed: {
    all: {
      get() {
        return this.selected.length === this.items.length;
      },
      set(val) {
      console.log(val)
        this.selected = val ? this.items.map(n => n.id) : [];
      },
    },
  },
});