Как передать данные в ключ и ссылку элемента ссылки?

Question

Я создаю приложение с использованием VueJS и Framework7, и у меня возникают проблемы с пониманием того, как применить динамическое сопоставление маршрутов к моему приложению.

У моего приложения есть две страницы: основной вид и информационная страница.На главной странице есть список ссылок, которые ведут на информационную страницу.Однако ссылки генерируются из данных API, и я хочу сделать то же самое на информационной странице.Я пытаюсь передать параметр id из данных API в адрес ссылки, чтобы он сохранялся там, даже когда я загружаю тот же шаблон информационной страницы.Используя это id, я хотел бы определить, какие данные для печати на информационной странице из данных API.

Вот мой элемент ссылки:

<f7-list-item v-for="lowerBoss in lowerBosses" :key="lowerBoss.id" :data="lowerBoss" class="single-boss subheading white" link="/boss/lowerBoss.id" onclick="console.log(lowerBoss)">
 {{ lowerBoss.name }} 
</f7-list-item>

Итак, я здесьпытается передать id из объекта lowerBoss в адрес и ключ ссылки.Я также пытался console.log объект, но всякий раз, когда я нажимаю на эту ссылку, я получаю сообщение об ошибке: lowerBoss is not defined.

Я знаю, что я, скорее всего, должен использовать router-link для этого,но у меня были проблемы с тем, чтобы заставить это работать - ссылки не будут работать, куда бы они ни вели.Кроме того, у меня была та же проблема с ними.

Answer 1

Ответ выше верен.Вы должны помнить, что каждое свойство, написанное как обычно <component link="some-link/object.id"></component>, не будет проанализировано, но будет передано как string .Поэтому вы должны использовать :link="'/bla/bla/'+object.id".

lowerBoss будет доступен внутри компонента f7 как «данные», поскольку :data="lowerBoss" эта часть вашего тега.

Проверьте это Передача статического или динамического реквизита Vue.js

Для обработки событий вы должны использовать директивы vue.js Обработка событий

Answer 2

Попробуйте как показано ниже

  <f7-list-item v-for="lowerBoss in lowerBosses" :key="lowerBoss.id" :data="lowerBoss" class="single-boss subheading white" :link="'/boss/'+lowerBoss.id">
     {{ lowerBoss.name }} 
    </f7-list-item>