Làm cách nào để chuyển một giá trị từ dữ liệu Vue sang href?


141

Tôi đang cố gắng làm một cái gì đó như thế này:

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

Tôi không thể tìm ra cách thêm giá trị r.idvào cuối hrefthuộc tính để tôi có thể thực hiện cuộc gọi API. Bất kỳ đề xuất?

Câu trả lời:


318

Bạn cần sử dụng v-bind:hoặc bí danh của nó :. Ví dụ,

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

hoặc là

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

1
Tôi nhận được một lỗi biên dịch với cả hai mặc dù nó sẽ hoạt động. Có lẽ nó có vấn đề vì nó nằm trong v-for?
— bbennett36

2
Nó cần một "+". Điều này đã hoạt động <a :href="'/job/' + r.id"> {{r.job_title}} </a>
— bbennett36

59

Hoặc bạn có thể làm điều đó với mẫu ES6 bằng chữ:

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

0

Nếu bạn muốn hiển thị các liên kết đến từ tiểu bang hoặc cửa hàng của bạn trong Vue 2.0, bạn có thể làm như thế này:

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

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.