How do i auto-refresh my log rather then refreshing it manually - node.js

Question

I currently have a log box which shows the log from my backend. I have a button to refresh the log and the latest set of logs shows up. How do I set it to a auto-refresh log?
I have the code below for the button and switchbox
<div class="form-group row m-b-10">
<label class="col-form-label">Auto-Refresh:</label>
<div class="col-md">
<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 class="switcher switcher-success">
<button v-if="!checked" #click="logNode(namespace)" class="btn btn-xs btn-success">Refresh</button>
</div>
</div>
And the function for the refresh button is below. How do I call a function for the log to load on auto refresh when the switchbox is on?
logNode(namespace) {
console.log(namespace)
this.hidemodal = true;
this.logShow = true;
var requestobj = {
Namespace: namespace,
};
var apiobj = {
tablename: "bnm",
Id: VueCookies.get("activeNetwork_Id"),
method: "post"
};
var obj = {
apiobj: apiobj,
mainobj: requestobj
};
this.$store
.dispatch("logsAPI", obj)
.then(response => {
console.log(response);
console.log("test result");
if (response.data || response.status == 200) {
this.logString = response.data.Logstr;
this.$notify({
group: "querynotify",
title: "Success",
type: "success",
position: "top-right",
text: "Sucessfully Created Logs " + ":\n" + response.data.Username
});
} else {
this.$notify({
group: "querynotify",
title: "Error",
type: "warn",
position: "top-right",
text: "Error Creating Logs " + ":\n" + response.data.Username
});
}
})
.catch(error => {
this.$notify({
group: "querynotify",
title: "Error",
type: "error",
position: "top-right",
text: "Error View this node Log" +
":\n" +
error.data.err +
":\n" +
error.data.details
});
});
},

Answer 1

When you check box is checked, you can use setInterval() and when your checkbox is unchecked clearInterval.
Please check below working snippet.
*Note in this snippet, I have just used simple log for demo purpose. In that demo you can put your logic.
new Vue({
el: '#app',
data: {
checked: false,
autoRef:null
},
methods: {
toggle() {
if(this.checked){
this.autoRef = setInterval(() => {
this.logNode('Auto refresh called');
}, 3000);
}else{
clearInterval(this.autoRef);
}
},
logNode(msg) {
console.log(msg)
}
}
});
.btn-success {
background: green;
padding: 10px;
border: 1px solid #ccc;
color: #fff;
}
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.2.2/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.2.2/dist/vuetify.min.js"></script>
<div id="app" class="form-group row m-b-10">
<label class="col-form-label">Auto-Refresh:</label>
<div class="col-md">
<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 v-if="!checked" class="switcher switcher-success">
<button ref="myButton" #click="logNode('on button click')" class="btn btn-xs btn-success">Refresh</button>
</div>
</div>