Como passar um valor dos dados do Vue para o href?

141

Estou tentando fazer algo assim:

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

Não consigo descobrir como adicionar o valor r.idao final do hrefatributo para que eu possa fazer uma chamada de API. Alguma sugestão?

vue.js vue-router bbennett36
fonte

318

Você precisa usar v-bind:ou seu apelido :. Por exemplo,

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

ou

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

asemahle
fonte

1

Estou recebendo um erro de compilação com os dois, mesmo que funcione. Talvez ele tenha um problema, pois está dentro de um v-for?

bbennett36

2

Ele precisava de um "+". Isso funcionou <a: href="'/job/' + r.id"> {{r.job_title}} </a>

bbennett36

59

Ou você pode fazer isso com o literal do modelo ES6:

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

Ardhi
fonte

0

Se você deseja exibir links provenientes do seu estado ou loja no Vue 2.0, pode fazer o seguinte:

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

Waqar Shahid
fonte

Respostas: