如何将Vue数据传递到href中？

Question

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

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

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

- bbennett36

Answer 1

你需要使用 v-bind: 或者它的别名 :。例如，

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

或者

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

- asemahle

---

我在两个地方都遇到了编译错误，尽管它应该可以工作。也许由于它在v-for内部，所以存在问题？ - bbennett36

需要添加一个“+”号。这样可以正常工作：<a :href="'/job/' + r.id">{{ r.job_title }}</a>。 - bbennett36

我四年后遇到了同样的问题，这个答案再次为我解决了它。谢谢！ - bbennett36

在我的情况下，我想防止在单击没有方法的 'href' 时单击 table 中的 tr。我在 td 中使用了 .self 并将方法从 tr 移动到每个 td。请查看：https://dev59.com/fsHqa4cB1Zd3GeqP7s-O#74465289 - JotaPardo

在Vue3中，在v-for循环中使用以下绑定href的方式： <a :href="`/url/${categoryId}`">{{ item.title </a>}} - Irfan Ashraf

Answer 2

或者你可以使用ES6模板字面量来实现：

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

- Ardhi

Answer 3

您可以将静态值和动态值连接成字符串值，然后绑定 href。以您的示例为例：

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

- Khalid Ibrahim

Answer 4

如果您想在Vue 2.0中显示来自您的状态或存储的链接，可以按照以下方式进行：

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

- Muhammad Waqar Shahid

Answer 5

这也可以帮助解决问题。

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

- fcva