[Vuejs]-Vue.js – Watch the input value has been changed or not

by

2👍

✅

You do not need to watch the otp value to implement that. You only need to check if the value of the otp data property is empty in a setTimeout callback. You can add it inside handleJumpPage method (which is missing from your code above):

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

EDIT

If you want to add a timeout that checks if otp has changed 5 seconds since component mounting you can add an extra flag as data property and check its value:

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

1👍

Assuming that you start the 5 second countdown, as soon as the user visits the page. You’ll need to start the countdown when the page is loaded. You can do that using the mounted lifecycle hook.

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

Code sandbox link – https://codesandbox.io/s/damp-snowflake-tovs2

👤Sahil Khurana

Leave a comment