如何在 v-for 循环中添加 'exact' 属性

Question

我想弄清楚如何在动态加载的菜单中将 exact 属性添加到根 link。菜单项是从 REST API 加载的。

当前始终匹配根路径，因为它不包含 exact 属性。在类似的示例中，根 link 是硬编码的，我想避免这种情况。

这是应该完全匹配的路线

{ path: '/', component: HomePage }

router-link 是菜单的一部分，通过 axios 从 REST API 加载并映射到状态，包括根 link “/”。如何在 for 循环中只访问这一项以添加 exact 属性？

  <router-link tag="li" class="link" v-for="item in menu" v-bind:key="item.id" :to="item.slug">{{ item.content }}</router-link>

可能是我遗漏了什么，或者有更好的方法来实现这一点？非常感谢

Answer 1

你试过吗

<router-link tag="li" class="link" v-for="item in menu" v-bind:key="item.id" :to="item.slug" v-bind={ "exact": item.slug === "/" ? true : false }>{{ item.content }}</router-link>

Answer 2

像这样有条件地绑定确切的道具。

<router-link tag="li" class="link" v-for="item in menu" :key="item.id" :to="item.slug" :exact="item.slug === '/' ? true : false">
   {{ item.content }}
</router-link>

如何在 v-for 循环中添加 'exact' 属性

How to add the 'exact' prop in a v-for loop

vue.js

vue-router