我得到了一个输入字段：

<input type="text" maxlength="2" :value="valueHours" @input="calculateTimes($event)" @blur="updateValueHours($event)">

还有一张清单：

<div v-if="open" ... >
   <div v-for="..." >
        list rendered here

在输入字段中键入时，我计算应在列表中突出显示的值：

const calculateTimes = async (evt) => {
            evt.stopImmediatePropagation();

            var highlightIndex = null,
                iterator = 0;

            while (highlightIndex === null && iterator < props.options.length) {
                var time = new Date(props.options[iterator].select_value).getHours()
                
                if (time.toString().includes(evt.target.value)) {
                    highlightIndex = iterator;
                    hasFocus.value = iterator;

                    open.value = true;
                    
                    await checkIfListElementIsRendered(`elem-${iterator}`)
                    scrollToFocusedElement();
                }

                iterator++;
            }
        }

当open.value被设置为true时会出现问题。输入似乎失去了焦点，导致:value="valueHours"用它当前的空状态覆盖输入。仅仅预填充值（valueHours）并不能解决这个问题。重新聚焦输入也会导致错误的行为。为什么用v-if切换列表会从输入字段中移除焦点？