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>