通常，當用戶在輸入欄位中鍵入一些值時，該值會在模型中自動更新。我需要的是防止值在一段時間內自動更新。在我的應用程式中，我在畫布上繪制了一個網格。用戶在輸入欄位中輸入長度和寬度。我想在width用戶設定時觸發繪制網格，而不是更早（我watch為此使用）。問題是，當用戶輸入寬度，例如 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
一般來說 - 我希望程式等到用戶輸入長度和寬度，一旦輸入值，然后繪制一個網格。
這是一個可重現的示例：https ://codesandbox.io/s/vue-2-playground-vuex-drag-and-snap-to-tiles-un6984?file=/src/components/ZimModel.vue
uj5u.com熱心網友回復：
如果使用輸入欄位上的屬性觸發生成網格的任何功能@blur（當用戶離開輸入欄位時觸發） ，您的問題可能會得到解決
或者通過添加@input觸發呼叫 setTimeOut 的函式的屬性（每次在設定之前清除所述 timeOut，以避免多次執行代碼），如果 timeOut 在被另一個擊鍵清除之前完成，則執行您的函式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/490600.html
標籤：javascript Vue.js
上一篇：通過用戶名獲取用戶？