复选框切换器 VUE JS答案

【问题标题】：Checkbox switcher VUE JS复选框切换器 VUE JS
【发布时间】：2019-11-01 08:15:55
【问题描述】：

我正在尝试切换此复选框切换器。默认情况下已选中，未选中时，应显示一个按钮。在检查期间，应该有一个函数可以调用。我错过了什么？

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

【问题讨论】：

您在 v-model 指令中使用了“checked”变量，“unchecked”变量的值是多少？你可以设置 v-if="!checked" 当你输入 0 -> 你的按钮会出现
@ValeriiVoronkov 成功了！非常感谢！如何向复选框切换器添加功能？有可能吗？
我不明白你到底想用这个做什么。看来你试图让你自己的切换器逻辑。但是如果你可以使用标准输入[type="checkbox"]，为什么？
您可以将方法绑定到选中状态...checked="{{ methodName }}"。该方法将处理选中/未选中，您可以在其中编写业务逻辑。
@ValeriiVoronkov 实际上我想做的是，当开关打开时，它会自动刷新我的日志。标准输入会更好吗？

标签： javascript html vue.js

【解决方案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>

【讨论】：