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>
Source:stackexchange.com