如何将数据传递给 link 元素的键和 link？

Question

我正在使用 VueJS 和 Framework7 制作一个应用程序，但我无法理解如何将动态路由匹配应用于我的应用程序。

我的应用程序有两个页面，主视图和信息页面。在主页上，有一个 link 的列表，所有这些都指向信息页面。但是，link 是从 API 数据生成的，我希望在信息页面上也这样做。我想要做的是将 API 数据中的 id 参数传递到 link 地址，这样即使我加载相同的信息页面模板，它也存储在那里。使用 id，我想从 API 数据中确定要在信息页面上打印的数据。

这是我的 link 元素：

<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 对象传递到 link 地址和密钥。我也尝试 console.log 该对象，但每当我单击此 link 时，我都会收到一条错误消息 lowerBoss is not defined。

我知道我最有可能为此使用 router-link，但我很难让它发挥作用 - link 无法发挥作用。除此之外，我也遇到了同样的问题。

Answer 1

尝试如下

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

Answer 2

上面的答案是正确的。你必须记住，每个像往常一样写成 <component link="some-link/object.id"></component> 的属性都不会被解析，而是作为 string 传递。所以你必须使用 :link="'/bla/bla/'+object.id".

lowerBoss 将作为 "data" 在 f7 组件中可用，因为 :data="lowerBoss" 您的标签的这一部分。

勾选这个Vue.js Passing Static or Dynamic Props

要处理事件，您必须使用 vue.js 指令 Event handling

如何将数据传递给 link 元素的键和 link？

How do I pass data to the key and link of a link element?

vue.js

html-framework-7

vue-router

vuejs2