nuxt.jsでaxiosを使用して、ＡＰＩをデータを取得したい。

Question

axios を使用してＡＰＩを取得するメソッドの部分で
コード内のthis.items のitemsの部分で下記のようなエラーメッセージが表示され、
情報が取得できません。

どなたかご教示いただけませんでしょうか？

【エラーメッセージ】
Property 'items' does not exist on type 'AxiosPractice'. Did you mean 'itmes'?

<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 {
  itmes: 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")
      .then(response => {
        this.items = response.data.map((comment:any) => ({
          postId: comment.postId,
          email: comment.email,
          name: comment.name
        }));
      });
  }
}
</script>

Answer 1

items と itmes のタイポでは…？
v-data-table のプロパティ名も item ではなく itemsではないでしょうか？？

Comments

[takochan1192]

hajifu様　
回答ありがとうございます。typoでした(-_-;)

Answer 2

今回は、私のタイプミスと、取得した値をthis.itemsに代入する方法が間違っておりました。
then.などは使わずに、単純にthis.items = 戻り値　とすることで期待する結果を得ることができました。ご回答いただきました皆様本当にありがとうございました。
下記が、うまくいったコードとなります。

<template>
  <v-app>
    <v-data-table dense :headers="headers" :items="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: any[] = [];

  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.items = response.data.map((comment:any) => ({
      postId: comment.postId,
      email: comment.email,
      name: comment.name
    }));
  }
}
</script>

Answer 3

型定義エラーではないでしょうか。
以下の戻り値はオブジェクト配列型でしょうか。

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

Answer 4

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

をやめて

await .get("https://jsonplaceholder.typicode.com/posts/1/comments")...

にするとthenの中でのresponse受けられると思うのですがいかがでしょうか？

Comments

[takochan1192]

コメントありがとうございます。
ちょっとうまくいきませんでした。