[Nuxt.js]Fetch Data未定義エラー

緒論

サーバがデータを受信して画面に表示すると、変数名が定義されていないことがよくあります.

このような現象の原因と解決方法を試みる.

本題

作成したコードを見てみましょう.

        <div class="table__title">
          <a :href="project.doc.file" download>{{ project.doc.title }}</a>
        </div>

...

  computed: {
    projectspage() {
      return this.$store.state.projectspage.page
    },
    project() {
      return this.$store.state.projectspage.item
    },
  },

async fetchを使用してサーバからデータを受信してstoreに保存し、storeに格納されているデータを画面にインポートして出力します.

{
    "id": 2,
    "title": "테스트",
    "content": "<p data-block-key=\"6ditw\">제대로 표시 되나 확인해보는 테스트입니다.</p><p data-block-key=\"1sctm\"></p><img class=\"richtext-fullwidth\" src=\"https://hyojung-backend.s3.amazonaws.com/original_images/KaebCheo.PNG\" alt=\"캡처\" /><p data-block-key=\"677kp\"></p>",
    "date": "2022-03-22",
    "video_url": "test",
    "doc": {
        "id": 2,
        "title": "수료증",
        "file": "https://something.s3.amazonaws.com/documents/수료증.pdf"
    }
}

console.ログを撮って確認し、データを正常にインポートします.

でもおかしいな

htmlタグを削除してテストすると、内容や日付などの出力は良好ですが、docで定義された継承値、すなわちdocです.title, doc.fileなどを使うと問題が発生します.

どうしてこんなことが起こったの?**

コメントブログ
HTMLから読み込まれたデータを読み込もうとしても、データは未定義のままです.ただしundefined状態ではエラーは発生しませんが、データの属性値docは定義されていません.タイトルまたはdoc.fileなどをインポートすると問題が発生します.

では、解決しますね。

注意:ブログでは3つの方法が紹介されていますが、私の場合、data()にdefault変数を設定してfetchするだけです.次に定義する方法を使用します.

  data() {
    return {
      doc: {file: '', title: ''},
    }
  },

  async fetch() {
    await this.$store.dispatch(`projectspage/getItem`, this.$route.params.id)
    .then((response)=> {
      this.doc.file = response.data.doc.file;
      this.doc.title = response.data.doc.title;
    })
  },

n/a.結論

初めてVueとNuxtを勉強したとき、なぜこのようなエラーが発生したのか分かりませんでしたが、私はずっと開発していたので、どこでエラーが発生したのか、なぜエラーが発生したのかという問題を推測して解決することができました.