如何防止更新V模型输入？
通常，当用户在输入字段中键入某些值时，该值将在模型中自动更新。我需要的是防止价值在一段时间内自动更新。在我的应用程序中，我在画布上画了一个网格。输入字段中的用户类型长度和宽度。当width是由用户设置的，而不是更早的（我使用观看）时，我想触发绘制网格。问题是，当用户类型宽度（例如57）时，它首先绘制宽度= 5的网格，然后宽度= 57。这意味着我终于有2个网格。原因是Vue立即响应输入中的用户类型。
我尝试使用v-model.lazy以某种方式解决它，但它不起作用。我还尝试使用settimeout（），但似乎根本不起作用。我在可复制的示例中评论了这一部分代码：
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) // here I wait 3 sec after user inputs value in this field
一般来说 - 我希望该程序等到用户输入lenght和width，一旦输入值，然后绘制网格。
Normally, when user types some value in input field the value is automatically updated in a model. What I need is to prevent value from being updated automatically for some period of time. In my app I draw a grid on canvas. User types length and width in input fields. I want to trigger drawing a grid when width is set by user, not earlier (I use watch for that reason). The issue is that when user types width e.g. 57 then it first draws a grid of width=5 and right after that the width=57. It means I finally have 2 grids. The reason is that Vue responds immediately to what user types in input.
I tried to get around it somehow using v-model.lazy but it doesn't work. I also tried to use setTimeout() but it doesn't seem to work at all. I commented out this chunk of code in my reproducible 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) // here I wait 3 sec after user inputs value in this field
Generally speaking - I want the program to wait until user inputs lenght and width and once values are input then draw a grid.
Here is a reproducible example: https://codesandbox.io/s/vue-2-playground-vuex-drag-and-snap-to-tiles-un6984?file=/src/components/ZimModel.vue
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果在输入字段上使用
@blur属性触发网格的任何功能（当用户离开输入字段时触发）或通过添加
@input触发属性会触发调用settimeout的函数（每次在设置之前清除上述超时，以避免执行多个代码），如果超时在被另一个按键清除之前结束，则您的函数将执行。@blur属性， 则可以解决您的问题。Your problem could be solved if whatever function that makes the grid gets triggered with a
@blurattribute on the input field (which triggers when a user leaves the input field)Or by adding the
@inputattribute which triggers a function that calls a setTimeOut (every time clears the said timeOut before setting it, to avoid multiple code executions), and if the timeOut finishes before getting cleared by another keystroke, your function gets executed.