Обработка контекстных ссылок из restful api в vuejs

Question

Очевидно, я не использовал правильные условия поиска, потому что я не могу найти ничего похожего на мою проблему ..

В Vuejs Я использую топор ios Tot потребляют успокоительный API, результаты может содержать контекстные ссылки для ie завершения задачи. Как мне обработать эти GET-запросы от внешнего интерфейса?

Вот так выглядит мой ответ:

      {
        "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"
          }
        }
      }

Я пробовал это (что, очевидно, не дает мне необходимого результата ):

    <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>

Все, что я нашел, - это привязка ссылок к маршрутизатору. Но, похоже, все это связано с неусловными ссылками, мой API может пропустить определенные ссылки, если они не применяются.

Answer 1

Добавьте к своей ссылке это:

<a v-if="item._links.complete" :href="#" @click.prevent="clickHandler($event, item._links.complete.href)">

В ваших vue компонентных методах добавьте новый метод:

methods:{
    clickHandler(event, yourUrl){
        axios.get(yourUrl)
        .then(function (response){
            //do what you need with this response
        }
    }
}