如何将值从 Vue 数据传递给 href？

Question

我正在尝试做这样的事情：

<div v-for="r in rentals">
  <a bind-href="'/job/'r.id"> {{ r.job_title }} </a>
</div>

我不知道如何将 r.id 的值添加到 href 属性的末尾，以便我可以进行 API 调用。有什么建议吗？

Answer 1

您需要使用 v-bind: 或其别名 :。例如，

<a v-bind:href="'/job/'+ r.id">

或

<a :href="'/job/' + r.id">

Answer 2

或者您可以使用 ES6 模板字面量来做到这一点：

<a :href="`/job/${r.id}`"

Answer 3

如果你想在 Vue 2.0 中显示来自你的州或商店的链接，你可以这样做：

<a v-bind:href="''"> {{ url_link }} </a>

Answer 4

这也有帮助。

<a target="_blank" :href="r.reg_metadato">{{ r.reg_metadato }}</a>

Answer 5

您可以将静态值和动态值连接为字符串值，同时绑定 href。使用您的示例：

<div v-for="r in rentals">
  <a :href="'/job/' + r.id"> {{ r.job_title }} </a>
</div>

How to pass a value from Vue data to href?