Handling contextual links from restful api in vuejs - rest

Question

Apparently I haven't used the correct search terms, because I can't find anything like my issue..
In Vuejs I use axios tot consume a restful API, the results can contain contextual links to ie complete a task. How do I handle these GET requests from the frontend?
This is what my response looks like:
{
"id": 2,
"description": "iPhone",
"status": "IN_PROGRESS",
"_links": {
"self": {
"href": "http://localhost:8090/orders/2"
},
"orders": {
"href": "http://localhost:8090/orders"
},
"cancel": {
"href": "http://localhost:8090/orders/2/cancel"
},
"complete": {
"href": "http://localhost:8090/orders/2/complete"
}
}
}
I've tried this (which obviously doesn't get me the needed result):
<md-table v-model="orders" :table-header-color="tableHeaderColor">
<md-table-row slot="md-table-row" slot-scope="{ item }">
<md-table-cell md-label="Description">{{
item.description
}}</md-table-cell>
<md-table-cell md-label="Status">{{ item.status }}</md-table-cell>
<md-table-cell md-label="Action">
<a v-if="item._links.complete" :href="item._links.complete.href">
Complete
</a>
</md-table-cell>
</md-table-row>
</md-table>
All I did find some information about is binding links to the router.. But that all seems to be about non conditional links, my API can omit certain links if they don't apply.

Answer 1

Add to your link this:
<a v-if="item._links.complete" :href="#" #click.prevent="clickHandler($event, item._links.complete.href)">
Within your vue component methods add new method:
methods:{
clickHandler(event, yourUrl){
axios.get(yourUrl)
.then(function (response){
//do what you need with this response
}
}
}