如何从 Vuetify v-select 中移除焦点？

Question

<v-select>我遇到了Vuetify 组件的问题。我有一个 v 对话框，当我单击按钮时它会打开。效果很好。

在该 v 对话框中，有 3 个v-select，每个都在其v-col. 问题是，当 v-dialog 打开时，它会自动将焦点放在第一个 v-select 上，这非常烦人。

我尝试了多种解决方案，甚至设法触发模糊事件（我已将控制台日志放入模糊事件中）。但即使在触发模糊事件之后，焦点仍停留在该 v-select 上。根据这个截图。 这是代码v-select：

<v-select
        ref="selectCommune"
        v-model="commune"
        :items="communes"
        color="info"
        item-color="info"
        label="Commune"
        multiple
        hide-details
        outlined>
    <template v-slot:selection="{ item, index }">
        <v-chip v-if="index === 0">
            <span>{{ item }}</span>
        </v-chip>
        <span
                v-if="index === 1"
        >(+{{ commune.length - 1 }})</span>
    </template>
</v-select>

我尝试像这样模糊（）引用，但没有成功：

this.$nextTick(() => {
         this.$refs.selectCommune.blur()
       })

然后我也尝试了这个触发模糊事件，但焦点仍然停留在 v-select 上

this.$nextTick(() => {
    setTimeout(() => {
       this.$refs.selectCommune.$el.querySelector(".v-select__selections").firstElementChild.blur()
     })
})

我选择了 v-select__selections 第一个子项，因为我从 v-select 上触发的模糊事件中检查了事件目标。

请帮忙解决这个问题。我只在 v-dialog 中看到过这种情况。

Answer 1

你可以尝试使用常规的 html 内容

document.activeElement.blur();

它将完全消除焦点