如何将数据传递给链接元素的键和链接？答案

【问题标题】：How do I pass data to the key and link of a link element?如何将数据传递给链接元素的键和链接？
【发布时间】：2019-02-06 03:52:06
【问题描述】：

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

我的应用有两个页面，主视图和信息页面。在主页上，有一个链接列表，所有链接都指向信息页面。但是，链接是从 API 数据生成的，我希望在信息页面上做同样的事情。我正在尝试做的是将 API 数据中的 id 参数传递到链接地址，以便即使在我加载相同的信息页面模板时它也存储在那里。使用 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，但我无法让它发挥作用 - 链接在任何地方都不起作用。除此之外，我也和他们有同样的问题。

【问题讨论】：

标签： vue.js vuejs2 vue-router html-framework-7

【解决方案1】：

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

因为 :data="lowerBoss" 标签的这一部分，lowerBoss 将在 f7 组件中作为“数据”提供。

查看Vue.js Passing Static or Dynamic Props

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

【讨论】：

谢谢，但正如我已经回复了上面的答案，它似乎仍然没有通过属性 - 我什至不能在 f7-list-item 标签内使用 console.log(lowerBoss)。
这是因为你试图处理原生的“onclick”事件，它不会像那样工作
好的，我没有意识到，谢谢！我如何将这个id 转发到信息页面？我试过console.log(this.$route.params.id)，但它只返回undefined。我不确定我是否做对了。

【解决方案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>

【讨论】：

不幸的是，仍然给我同样的错误。除了v-for 之外，我似乎无法在f7-list-item 组件内的任何地方访问lowerBoss（或lowerBosses）。我真的很困惑。
你应该定义 export default { props :{ id:String }, data(props) { return { } }