Utilize an API call to fetch data and seamlessly showcase it on the webpage using Vue.js

I have created an API and defined it 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 want to fetch the API response and display the data on the page.

Could you provide an example of how I can achieve this using Vue.js?

When I examined the response body in Postman, here is what I found:

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

My goal is to simply display this data on the page.

Thank you in advance.

Answer №1

Here is a different approach to solve the problem :

new Vue({
  el: '#app',
  data: {
    response: {
      data: {}
    }
  },
  mounted() {
    // Instead of calling an API, for this demo I will simulate the 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The function you are trying to call is not valid... the specified type does not have any call signatures [ts 2349

Having some trouble using functions from Observable Plot example with a marimekko chart in my TypeScript project. I encountered an error on this particular line: setXz(I.map((i) => sum.get(X[i]))) The code snippet causing the issue is as follows: fu ...

After refreshing the page, vuex is encountering null values when using firebase.auth().onAuthStateChanged

Encountering an issue with Vuex and Firebase Authentication integration. When reloading the page, there is a delay in response from firebase.auth().onAuthStateChanged. I require an immediate response upon page reload without using router guards as seen in ...

Troubleshooting Node.js import module errors

I have just discovered two files that I created using the TS language specification manual (on page 111). The first file, called geometry.ts, contains the following code: export interface Point { x: number; y: number }; export function point(x: number, y ...

Utilizing images in a compiler run with the option of `allowJS:true` is key

Looking to develop a React Native library using JavaScript instead of typescript, but want to leverage TSC for its ability to generate type declarations from jsdoc comments. However, encountering an issue where local images are not included when the ts com ...

Activate a specific component of hover effect within multiple components generated by the `v-for` loop

Hey there! I'm currently facing a CSS challenge related to Vue. Let's say I want to display multiple components using v-for, and I want to add a hover effect to each component individually. The goal is to have the hover effect only apply to the c ...

The offline functionality of the Angular Progressive Web App(PWA) is experiencing difficulties

As per the official guidelines, I attempted to create a PWA that functions in offline mode using pure PWA without angular-cli. However, despite following the official instructions, I was unable to make it work offline. The document in question can be foun ...

Tips for successfully executing queries with Axios within a Vue application

Is there a way to send query parameters using Axios so that I can access them in my backend code using req.query.email? The following approach doesn't seem to be working as expected: this.$http.post(this.$BASE_URL + 'agents/auth/create-password&a ...

Issue with rendering images on Bootstrap-Vue card component

In the process of creating a static website with Vue.js, I am attempting to incorporate a basic Bootstrap card using Bootstrap-Vue. Unfortunately, I am facing an issue where the image does not display when utilizing the b-card component with the img attrib ...

Inputting data types as arguments into a personalized hook

I am currently developing a Next.js application and have created a custom hook called useAxios. I am looking to implement a type assertion similar to what can be done with useState. For example: const [foo, setFoo] = useState<string>(''); ...

Is there a way to automatically close the modal in a Vue component after clicking the save button?

Here is my Vue component code: <template> <div ref="modal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <form> ...

Generate dynamic Tailwind styles using Vue programmatically

Is it possible to dynamically change Tailwind classes based on data values? For example, I have double side menus and main content, and I want to adjust the menu width and margins of the main content programmatically. Despite setting crafted classes in T ...

What could be the reason for Vue's ref not functioning properly with Set data type, but working perfectly fine with integer

There seems to be an issue with the watch function when using Set, but it works fine with int. Switching from ref() to reactive() resolves the problem. Is this behavior expected? <script setup> import { ref,watch,reactive } from 'vue' cons ...

What are the counterparts of HasValue and .Value in TypeScript?

There is a method in my code: public cancelOperation(OperationId: string): Promise<void> { // some calls } I retrieve OperationId from another function: let operationId = GetOperationId() {} which returns a nullable OperationId, operat ...

Encountering the "Not all code paths return a value" TypeScript error when attempting to manipulate a response before returning it, however, returning the response directly works without any issues

Encountering an issue where manipulating/process response and return triggers an error in TypeScript with the message "Not all code paths return a value.". Data is fetched from a backend API using RxJS lastValueFrom operator, along with lodash functions as ...

Ensuring validity with Vuelidate for customizable fields

There's a form where fields are dynamically added on a click event. I want a validation error to appear when the field value is less than 9 digits after changing or blurring it. The issue is that since the fields are created dynamically with the same ...

What is the best way to automatically focus on my input when the page loads?

My Angular application has a 'slider' component that loads 3 child components utilizing ng-content. The first child component contains a form, and I am trying to focus on the first field upon page load. Despite setting up ViewChild correctly to r ...

What is the method for implementing two-way binding on a checkbox in Angular?

Within my accordion, I have a series of options in the form of checkboxes. Users are able to select these checkboxes, but I am seeking a way to pre-select certain checkboxes based on specific conditions. The challenge arises when these conditions are deter ...

Error Styling: Using CSS to Highlight Invalid Checkboxes within a Group

Is there a way to create a bordered red box around checkboxes that are required but not selected? Here is the code I currently have: <div class="fb-checkbox-group form-group field-checkbox-group-1500575975893"> <label for="checkbox-group-15005 ...

Contrasting the functions of this.$parent.$emit and this.$emit

When looking to have a custom component trigger an event in VueTable2, it is important to remember that we should use: this.$parent.$emit('myCustomEvent') // as opposed to this.$emit('myCustomEvent') The insights shared in this discu ...

Guide on navigating to a different page by simply clicking on a row within an HTML table

I am using an MVC application. When a user clicks on a row in the Index page, I want them to be directed to the DetailInfo page. How can this be achieved? This is part of the code in Index.cshtml @for (var item = 0; item < Model.Count; item++ ...