I'm facing an issue where I can't select an option while a setInterval function is running on the page. The main problem is that an option cannot be selected at the same time as the setInterval timer fires.
let updateDelay = 100;
var vueObj = new Vue({
el: '#app',
data: {
items: ['item 1', 'item 2', 'item 3'],
timer: 60,
choice: ''
}
})
setInterval(function() {
vueObj.timer = vueObj.timer - updateDelay/1000;
}, updateDelay);<script src="https://unpkg.com/vue"></script>
<div id="app">
<div id='timer'>Timer: {{ timer.toFixed(1) }}</div>
<br>
<select v-model='choice' size=3>
<option v-for='item in items' :value='item'>{{item}}</option>
</select>
</div>- Pressing keys for selection works without any issues.
- The problem disappears when
v-modelis removed from theselect. - Choosing becomes smoother when the timer interval is longer.