复选框切换器VUE JS

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

看看这个代码沙盒片段

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

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>