¿Cómo pasar un valor de datos Vue a href?

142

Estoy tratando de hacer algo como esto:

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

No puedo entender cómo agregar el valor r.idal final del hrefatributo para poder hacer una llamada a la API. ¿Alguna sugerencia?

vue.js vue-router

— bbennett36
fuente

Respuestas:

320

Necesitas usar v-bind:o su alias :. Por ejemplo,

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

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

— asemahle
fuente

Recibo un error de compilación con ambos, aunque debería funcionar. ¿Tal vez tiene un problema ya que está dentro de un v-for?

— bbennett36

Necesitaba un "+". Esto funcionó <a :href="'/job/' + r.id"> {{r.job_title}} </a>

— bbennett36

O puede hacerlo con la plantilla ES6 literal:

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

— Ardhi
fuente

Si desea mostrar enlaces procedentes de su estado o tienda en Vue 2.0, puede hacer lo siguiente:

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

— Waqar Shahid
fuente

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.

Licensed under cc by-sa 3.0 with attribution required.