Bagaimana cara menyampaikan nilai dari data Vue ke href?

Question 1

Saya mencoba melakukan sesuatu seperti ini:

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

Saya tidak tahu cara menambahkan nilai r.idke akhir hrefatribut sehingga saya bisa melakukan panggilan API. Ada saran?

Question 2

Anda perlu menggunakan v-bind:atau aliasnya :. Sebagai contoh,

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

atau

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

Question 3

Atau Anda dapat melakukannya dengan literal template ES6:

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

Question 4

Jika Anda ingin menampilkan link yang berasal dari negara bagian atau toko Anda di Vue 2.0, Anda dapat melakukan seperti ini:

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

Answer 1

Saya mencoba melakukan sesuatu seperti ini:

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

Saya tidak tahu cara menambahkan nilai r.idke akhir hrefatribut sehingga saya bisa melakukan panggilan API. Ada saran?

Answer 2

345

Anda perlu menggunakan v-bind:atau aliasnya :. Sebagai contoh,

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

atau

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

asemahle
sumber

1

Saya mendapatkan kesalahan kompilasi dengan keduanya meskipun seharusnya berfungsi. Mungkin ada masalah karena ada di dalam v-for?

bbennett36

3

Ini membutuhkan "+". Ini berhasil <a :href="'/job/' + r.id"> {{r.job_title}} </a>

bbennett36

Answer 3

1

Saya mendapatkan kesalahan kompilasi dengan keduanya meskipun seharusnya berfungsi. Mungkin ada masalah karena ada di dalam v-for?

bbennett36

Answer 4

3

Ini membutuhkan "+". Ini berhasil <a :href="'/job/' + r.id"> {{r.job_title}} </a>

bbennett36

Answer 5

69

Atau Anda dapat melakukannya dengan literal template ES6:

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

Ardhi
sumber

Answer 6

Jika Anda ingin menampilkan link yang berasal dari negara bagian atau toko Anda di Vue 2.0, Anda dapat melakukan seperti ini:

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

Jawaban: