How to get API using axios in nuxt.js?

Question

I want to get API information and set the data-table. But my code has error. Error messages are below in console.

Property or method "items" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Please someone advise me?

and also my English is not good so please someone help my question to correctly English.

<template>
  <v-app>
    <v-data-table dense :headers="headers" :item="items" class="elevation-1"></v-data-table>
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import axios from "axios";

@Component
export default class AxiosPractice extends Vue {
  items: object[] = [];

  headers = [
    { text: "id", value: "postId" },
    { text: "name", value: "name" },
    { text: "email", value: "email" }
  ];
  async mounted() {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/posts/1/comments"
    );
    this.itmes = response.data.map((comment:any) => ({
      postId: comment.postId,
      email: comment.email,
      name: comment.name
    }));
  }
}
</script>

Try not to mix await with then(), it just makes things confusing — Phil
– Phil, Commented Jul 17, 2020 at 7:42

sandrooco · Accepted Answer · 2020-07-17 08:05:55Z

3

I suppose that response is an object that contains the property data (see docs) which (in this case) holds an array of objects. Assuming you want to save postId, email and name for every comment in items, you could try this:

const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1/comments');

this.items = response.data.map(comment => ({
  postId: comment.postId,
  email: comment.email,
  name: comment.name,
}));

answered Jul 17, 2020 at 8:05

sandrooco

8,88611 gold badges56 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

drunkdolphin Over a year ago

Thank you for your answer. I tried your code, but had error.

drunkdolphin Over a year ago

itmes : ⇒Property 'items' does not exist on type 'AxiosPractice'. Did you mean 'itmes'

drunkdolphin Over a year ago

comment⇒Parameter 'comment' implicitly has an 'any' type.

drunkdolphin Over a year ago

I really understand your explanations and i really appreciated it. Could you explain about error.please??

sandrooco Over a year ago

You have a typo in items: itmes:object.

|

Collectives™ on Stack Overflow

How to get API using axios in nuxt.js?

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related