¿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

320

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

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

o

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

asemahle
fuente

1

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

2

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

bbennett36

59

O puede hacerlo con la plantilla ES6 literal:

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

Ardhi
fuente

0

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

Respuestas: