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

尝试如下

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

由于 :data="lowerBoss" 这部分标记，

lowerBoss将在f7组件内作为“数据”提供。

选中此Vue.js Passing Static or Dynamic Props

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

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

2 个答案: