ROUTERLINK 不支持 Focus 事件

Question

这是我的代码片段，来自 Vue.js 应用程序

    <li v-for="(category, index) in data.categories" :key="index" class="category">
        <RouterLink
            :to="{ path: category.url }"
            :style="{
                color: category['Category Colour'].value,
                borderColor: category['Category Colour'].value,
            }"
            :class="{ current: category.currentCategory }"
            class="link"
            @focus="menuItemFocus(true)"
            @blur="menuItemFocus(false)"
        >
            <ScText :field="category['Category Name']" />
        </RouterLink>
    </li>

但是 menuItemFocus 方法没有被调用。

我试过 v-on:focus 但结果是一样的。

我尝试用警报替换，但它从未出现。 @focus="alert('Focus, young padawan!')"

所以我猜Routerlink不支持焦点事件。

我想我可能需要编写自己的组件，但有更好的选择吗？

Answer 1

我需要使用 focus.native。现在可以使用了！

<li v-for="(category, index) in data.categories" :key="index" class="category">
    <RouterLink
        :to="{ path: category.url }"
        :style="{
            color: category['Category Colour'].value,
            borderColor: category['Category Colour'].value,
        }"
        :class="{ current: category.currentCategory }"
        class="link"
        @focus.native="menuItemFocus(true)"
        @blur.native="menuItemFocus(false)"
    >
        <ScText :field="category['Category Name']" />
    </RouterLink>
</li>

ROUTERLINK 不支持 Focus 事件

ROUTERLINK does not support Focus event

vue.js

focus

onfocus

routerlink