JSFiddle - React, Tailwind, and code Playground

VueJS checkbox watcher

by tonytlwu

HTML

<!-- Include the library in the page -->
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<!-- App -->
<div id="app">
  <input
    type="checkbox"
    :id="name + '-' + 'select-all'"
    v-model="selectedAll">
  <label :for="name + '-' + 'select-all'">
    <span class="check focus-outline" tabindex="0">
      <i class="fa fa-check"></i>
    </span>
    <span class="option-item">Select all</span>
  </label>
  
  <p><a href="#" @click.prevent="clickHandler">Toggle</a></p>
</div>

JavaScript

console.clear()

// New VueJS instance
var app = new Vue({
  // CSS selector of the root DOM element
  el: '#app',
  // Some data
  data: () => ({
    name: 'foo'
  }),
  props: {
  	selectedAll: {
    	type: Boolean,
      default: false
    }
  },
  watch: {
    selectedAll: {
    	handler(newValue, oldValue) {
        console.log(newValue, oldValue);
      }
    }
  },
  methods: {
  	clickHandler() {
    	this.selectedAll = !this.selectedAll;
    }
  }
})