Question

我正在尝试切换此复选框切换器。默认情况下已选中它，而未选中时，将出现一个按钮。在检查期间，应该有一个要调用的函数。我想念什么？

<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

看看this codesandbox snippet

为复选框和按钮创建方法，如下所示，并定义自己的行为：

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

您的html如下所示：

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

复选框切换器VUE JS

1 个答案: