Typically, when a user enters a value in an input field, it automatically updates a model. However, I am looking to temporarily prevent this automatic update. In my application, I have a canvas where users can draw grids by entering lengths and widths in input fields. I want the grid to be drawn only when the width is set by the user, not before (I utilize 'watch' for this purpose). The problem arises when a user inputs a width like 57 - it initially draws a grid with a width of 5 and then quickly changes it to 57, resulting in two grids being displayed. This happens because Vue immediately reacts to user input.
I've tried using 'v-model.lazy' and even attempted to use 'setTimeout()', but neither solution seemed to work effectively. I ended up commenting out the following code snippet in my test example:
function draw() {
for (var j=0; j<rows; j++) {
for (var i=0; i<cols; i++) {
tile = new Rectangle({width:size, height:size, borderColor:"#a8a8a8", borderWidth:0.2})
.centerReg(tiles)
.loc(size/2 + i*(size), size/2 + j*(size));
}
}
}
setTimeout(draw, 3000) // waiting 3 seconds after user inputs value in this field
In essence, I want the program to wait until both length and width values are entered before drawing the grid.
For a reproducible example, you can visit: https://codesandbox.io/s/vue-2-playground-vuex-drag-and-snap-to-tiles-un6984?file=/src/components/ZimModel.vue