V4 - How can I solve "cannot read properties of undefined"?

Questions and Answers
1
System Information
  • Strapi Version: 4.0.3
  • Operating System: Windows
  • Database: Postgres

I’m integrating Strapi 4 into my website, and I’m following the documentation, but I keep getting an error of “cannot read properties of undefined (reading ‘Headline’)” when I try and test.

The data is showing in the devtools network tab, but it continues to give the error when attempting to pull into the front end. I’ve tried using ‘headline’ vs ‘Headline’ but to know avail. I know it changed between 3 and 4 where the .attributes. is needed, but I don’t see anything else that could be causing any issues.

Below is all the relevant code. Thank you for your help in advance!

Single Article Page

<template>
  <div>
    <v-container>
      <v-row>
        <v-col cols="12" lg="8" xl="8">
          <div>
            <div>
              <v-card flat color="transparent">              
                <v-card-text>              

                  <div class="text-h4 font-weight-bold primary--text pt-4">
                    <h4>{{ PressRelease.attributes.Headline }}</h4>
                  </div>

                  <div class="text-body-1 py-4">
                    {{ PressRelease.attributes.Subheading }}
                  </div>

                  <div class="d-flex align-center justify-space-between">
                    <div class="d-flex align-center">
                      <v-avatar color="accent" size="36">
                        <v-icon dark>mdi-newspaper</v-icon>
                      </v-avatar>

                      <div class="pl-2 text-body-1">
                        {{ moment(PressRelease.created_at).format("MMMM Do YYYY") }}
                      </div>
                    </div>
                  </div>

                  <v-divider class="my-4"></v-divider>

                  <vue-markdown-it
                    v-if="PressRelease.attributes.Body"
                    :source="PressRelease.attributes.Body"
                    id="editor"
                  />

                  <v-divider class="my-8"></v-divider>
                </v-card-text>
              </v-card>
            </div>
          </div>
        </v-col>
      </v-row>
    </v-container>
    <div class="mt-5 mb-5">
      <hr style="margin-top:0 !important;" class="blue-divider" />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
var moment = require("moment");
import VueMarkdownIt from "vue-markdown-it";

export default {
  name: "pressRelease",
  components: {
    VueMarkdownIt,    
  },
  filters: {},
  data() {
    return {
      PressRelease: [],
      moment: moment,
    };
  },
  async beforeRouteEnter(to, from, next) {
    try {      
      var PressRelease = await Vue.$pressReleaseService.findOne(to.params.id);

      return next((vm) => {
        vm.PressRelease = PressRelease;
      });

    } catch (err) {
      console.log(err);
      next(false);
    }
  },
   async beforeRouteUpdate(to, from, next) {
    try {      
      this.PressRelease = await Vue.$pressReleaseService.findOne(to.params.id);

      return next();

    } catch (err) {
      console.log(err);
      next(false);
    }
  },
};
</script>

Service.js File

// press release service

export default {
    install: (Vue) => {
      //private
      const route = '{{ROUTE}}';
  
      //public
      Vue.$pressReleaseService = {
        find(params) {
          return Vue.axios.get(route, {
            params: params
          });
        },

        findOne(key, params) {
          return Vue.axios.get(`${route}/${key}`, {
            params: params
          });
        },
      };

      
    }
  };
2

I think when you do the findOne, it returns the object like this. Check that top level data key

{
  "data": { //<--- here
    "id": 1,
    "attributes": {
      "title": "Restaurant A",
      "description": "Restaurant A's description"
    },
    "meta": {
      "availableLocales": []
    }
  },
  "meta": {}
}
3

Thanks for the advice! Ultimately, what it was was the following:

return next((vm) => {
        vm.PressRelease = PressRelease;
      });

It needed to be

return next((vm) => {
        vm.PressRelease = PressRelease.data.data;
      });
1 Like