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

#vue.js #vue-router

#vue.js #vue-маршрутизатор

Вопрос:

Я пытаюсь выяснить, как добавить 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>

Может быть, я чего-то не хватает, или есть лучший способ добиться этого?
Большое спасибо

Ответ №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>

Ответ №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>