My setup involves Vue CLI 3.11 (based on Node.js 12.10) and Google Chrome.
I am trying to create a syntax that can bypass the watch function under specific conditions. However, I am struggling because Vue.js handles value changes differently compared to JavaScript.
For instance, in the following code snippet, the value is always logged because the "valuelock" is consistently false in the watch function.
<script>
export default {
name: 'app',
data(){
return {
v: null,
valuelock: false
};
},
mounted(){
this.valuelock = true;
this.v = localStorage.getItem("value");
if(this.v === null) this.v = 0;
this.valuelock = false;
},
watch:{
v(nv){
console.log("watch:"+this.valuelock);
if(this.valuelock === false){
localStorage.setItem("value", nv);
}
}
}
}
</script>
Currently, I am using setTimeout() to handle the delay, but I am unsure if this is the best approach.
mounted(){
this.valuelock = true;
this.v = localStorage.getItem("value");
if(this.v === null) this.v = 0;
const t = this;
setTimeout(()=>{
t.valuelock = false;
}, 0);
},
If you have a more efficient method to manage real-time value changes in Vue.js, please share your insights!