Vue.js

Question

我是Vue.js的新人。目前，我正在创建一个验证对话框来查看用户的 otp 是否有效。如果该值在 5 秒内未更改，我的应用程序将自动断开连接。但是，如果我使用watch来监控这个值，它并没有起作用，因为这个值没有改变，watch不会触发。

如何监控5秒内没有变化的值？

对话框

<template>
 <div>
  <input type="text" v-model="otp">
  <b-button size="md" @click="cancel()" class="jump-to-ada-btn-cancel">
    Cancel
  </b-button>
  <b-button size="md" @click="handleJumpPage()" class="jump-to-ada-btn">
    Send
  </b-button>
 </div>
</template>

<script>

export default {
  data () {
    return {
      otp: ""
    }
  },
  computed: {
    show: {
      get: function () {
        return this.$store.state.modals.showOTPModal
      },
      set: function (val) {
        this.$store.commit("OPEN_OTP", {fieldName: "showOTPModal", fieldValue: val})
      }
    }
  },
  methods: {
    checkValueChange(newValue) {
      if(newValue === "") {
        alert("value is not changed yet")
      }
    }
  },
  watch: {
    otp: function(v) {
      console.log(v)
      let self = this
      setTimeout(function() {
        self.checkValueChange(v)
      }, 5000)
    }
  }
}
</script>

Answer 1

您无需查看 otp 值即可实现。您只需要在setTimeout 回调中检查otp 数据属性的值是否为空。您可以将其添加到 handleJumpPage 方法中（上面的代码中缺少该方法）：

setTimeout(() => {
  if (this.otp === "") {
     // disconnect
  }
}, 5000)

编辑

如果您想添加一个超时来检查 otp 是否在组件安装后 5 秒内更改，您可以添加一个额外的标志作为数据属性并检查其值：

data: {
   otp: "",
   otpUpdated: false
},
watch: {
   otp() {
      otpUpdated = true
   }
},
mounted() {
  setTimeout(() => {
     if (!this.otpUpdated) {
       // disconnect
     }
   }, 5000)
}

Answer 2

假设您在用户访问页面后立即开始 5 秒倒计时。您需要在页面加载后开始倒计时。您可以使用已安装的生命周期挂钩来做到这一点。

mounted: function() {
 setTimeout(() => {
  this.checkValueChange(this.otp)
 }, 5000)
}

代码沙箱 link - https://codesandbox.io/s/damp-snowflake-tovs2

Vue.js - 观察输入值是否改变

Vue.js - Watch the input value has been changed or not

watch

settimeout