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事件

1 个答案: