我如何自动刷新我的日志而不是手动刷新它

Question

我目前有一个显示后端日志的日志框。我有一个按钮来刷新日志并显示最新的日志集。如何将其设置为自动刷新日志？

我有下面的按钮和开关盒代码

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

刷新按钮的功能如下。开关盒打开时如何调用日志自动刷新的函数？

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

选中复选框时可以使用setInterval()，未选中复选框时可以使用clearInterval。

请检查下面的工作 sn-p。

*Note 在这个 sn-p 中，我只是使用了简单的日志来进行演示。在那个演示中，您可以放置​​您的逻辑。

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>