复选框切换器 VUE JS

Question

I am trying to toggle this checkbox switcher. It is checked by default and when unchecked, a button should appear. During the checked, there should be a function to call. What am i missing?

<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="" value="1">
                                    <label for="switcher_checkbox_2"></label>
                                </div>

              </div>
              <div class="col-md-9" v-if="unchecked">
<button @click="logNode(namespace)" class="btn btn-xs btn-success" >Refresh</button>
</div>
              </div>

Answer 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>