จะส่งค่าจากข้อมูล Vue ไปยัง href ได้อย่างไร

142

ฉันพยายามทำสิ่งนี้:

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

ฉันไม่สามารถหาวิธีเพิ่มมูลค่าr.idให้กับจุดสิ้นสุดของhrefแอตทริบิวต์เพื่อให้ฉันสามารถเรียก API ได้ ข้อเสนอแนะใด ๆ

vue.js vue-router

— bbennett36
แหล่งที่มา

320

คุณจำเป็นต้องใช้หรือนามแฝงของมันv-bind: :ตัวอย่างเช่น,

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

หรือ

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

— asemahle
แหล่งที่มา

1

ฉันได้รับข้อผิดพลาดในการรวบรวมกับทั้งสองแม้ว่ามันจะทำงาน บางทีมันอาจจะมีปัญหาเพราะมันอยู่ใน v-for?

— bbennett36

2

ต้องการ "+" สิ่งนี้ใช้งานได้ <a :href="'/job/' + r.id"> {{r.job_title}} </a>

— bbennett36

59

หรือคุณสามารถทำได้ด้วยเทมเพลตตัวอักษร ES6:

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

— Ardhi
แหล่งที่มา

0

หากคุณต้องการแสดงลิงค์ที่มาจากรัฐหรือร้านค้าใน Vue 2.0 คุณสามารถทำสิ่งนี้ได้:

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

— Waqar Shahid
แหล่งที่มา