[Vuejs]-Checkbox switcher VUE JS

1👍

Take a look at this codesandbox snippet

Create methods for checkbox and button like below and define their own behaviour:

data: function() {
  return {
    checked: true
  };
},
methods: {
    logNode: function(myNamespace) {
      alert("button pressed");
    },
   toggle: function() {
      alert("checkbox triggered");
  }
}

Your html will look like this:

<template>
  <div class="form-group row m-b-10">
    <label class="col-form-label">Auto-Refresh:</label>
    <div class="col-md-9">
      <div class="switcher switcher-success">
      <input
        type="checkbox"
        v-model="checked"
        name="switcher_checkbox_2"
        id="switcher_checkbox_2"
        checked="true"
        value="1"
        v-on:change="toggle">
      <label for="switcher_checkbox_2"></label>
    </div>
  </div>
  <div class="col-md-9" v-if="!checked">
    <button @click="logNode(namespace)" class="btn btn-xs btn-success">Refresh</button>
  </div>
</div>

Leave a comment