Как добавить «точную» опору в цикл v-for

Question

Я пытаюсь выяснить, как добавить свойство exact к корневой ссылке в динамически загружаемом меню. Пункты меню загружаются из REST API.

В настоящее время корневой путь всегда совпадает, поскольку он не содержит свойства exact. В подобных примерах корневая ссылка жестко закодирована, чего я хочу избежать.

Это маршрут, который должен соответствовать точно

{ path: '/', component: HomePage }

Маршрутизатор-ссылка является частью меню, которое загружается через axios из REST API и отображается в состояние, включая корневую ссылку "/". Как я могу получить доступ только к этому одному элементу цикла 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" :key="item.id" :to="item.slug" :exact="item.slug === '/' ? true : false">
   {{ item.content }}
</router-link>

Answer 2

Вы когда-нибудь пробовали

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