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

Question

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

在该v对话框中，有3个v-select，每个v-col中都有一个。 问题在于，当v对话框打开时，它会自动将焦点放在第一个v选择上，这很烦人。

我尝试了许多解决方案，甚至设法触发了模糊事件（我在模糊事件中放入了控制台日志）。但是即使触发了模糊事件，焦点仍然停留在该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对话中发生。

Answer 1

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

document.activeElement.blur();

它将完全消除焦点