call API and then display data using Vue.js in the page

Question

I have my api and in my typescript file

const Book = {
   async getBookType(intID: string): Promise<Book[]> {
        // const intId = API.Product.getCurrentId();
        const intId = '';
        const response = await http.get('/myasset/booktypes', {
            params: {
            int_id: intID,
            },
        });
        const bookTypes = JSON.parse(JSON.stringify(response.data));
        return bookTypes;
   },
};

Now on my bookpage.vue, I need to call api response and load data in my page.

Can you give example on how to display it using vue.js ...

When i check the response body in postman i got this

"adventure": 1,
"biography": 2,
"drama": 1
"romance": 1

So i need to simple display them in the page.

Thanks in advance.

Answer 1

Try this way :

new Vue({
  el: '#app',
  data: {
    response: {
      data: {}
    }
  },
  mounted() {
    // You can get this data from an API, FOr the demo purpose I am just mocking this response.
    this.response.data = {
      "adventure": 1,
      "biography": 2,
      "drama": 1,
      "romance": 1
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(item, index) in Object.keys(response.data)" :key="index">
      {{ item }} - {{ response.data[item] }}
    </li>
  </ul>
</div>