title: How can I solve "cannot read properties of undefined" in Strapi 4?
body: <p>I'm integrating Strapi 4 into my website, and I'm following the <a href="https://docs.strapi.io/developer-docs/latest/developer-resources/content-api/integrations/vue-js.html#get-request-your-collection-type" rel="nofollow noreferrer">documentation</a>, but I keep getting an error of &quot;cannot read properties of undefined (reading 'Headline')&quot; when I try and test.</p>
  <p>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.</p>
  <p>Below is all the relevant code. Thank you for your help in advance!</p>
  <p><strong>Single Article Page</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;v-container&gt;
        &lt;v-row&gt;
          &lt;v-col cols=&quot;12&quot; lg=&quot;8&quot; xl=&quot;8&quot;&gt;
            &lt;div&gt;
              &lt;div&gt;
                &lt;v-card flat color=&quot;transparent&quot;&gt;              
                  &lt;v-card-text&gt;              
  
                    &lt;div class=&quot;text-h4 font-weight-bold primary--text pt-4&quot;&gt;
                      &lt;h4&gt;{{ PressRelease.attributes.Headline }}&lt;/h4&gt;
                    &lt;/div&gt;
  
                    &lt;div class=&quot;text-body-1 py-4&quot;&gt;
                      {{ PressRelease.attributes.Subheading }}
                    &lt;/div&gt;
  
                    &lt;div class=&quot;d-flex align-center justify-space-between&quot;&gt;
                      &lt;div class=&quot;d-flex align-center&quot;&gt;
                        &lt;v-avatar color=&quot;accent&quot; size=&quot;36&quot;&gt;
                          &lt;v-icon dark&gt;mdi-newspaper&lt;/v-icon&gt;
                        &lt;/v-avatar&gt;
  
                        &lt;div class=&quot;pl-2 text-body-1&quot;&gt;
                          {{ moment(PressRelease.created_at).format(&quot;MMMM Do YYYY&quot;) }}
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;v-divider class=&quot;my-4&quot;&gt;&lt;/v-divider&gt;
  
                    &lt;vue-markdown-it
                      v-if=&quot;PressRelease.attributes.Body&quot;
                      :source=&quot;PressRelease.attributes.Body&quot;
                      id=&quot;editor&quot;
                    /&gt;
  
                    &lt;v-divider class=&quot;my-8&quot;&gt;&lt;/v-divider&gt;
                  &lt;/v-card-text&gt;
                &lt;/v-card&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/v-col&gt;
        &lt;/v-row&gt;
      &lt;/v-container&gt;
      &lt;div class=&quot;mt-5 mb-5&quot;&gt;
        &lt;hr style=&quot;margin-top:0 !important;&quot; class=&quot;blue-divider&quot; /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Vue from &quot;vue&quot;;
  var moment = require(&quot;moment&quot;);
  import VueMarkdownIt from &quot;vue-markdown-it&quot;;
  
  export default {
    name: &quot;pressRelease&quot;,
    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) =&gt; {
          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);
      }
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p><strong>Service.js File</strong></p>
  <p>// press release service</p>
  <pre><code>export default {
      install: (Vue) =&gt; {
        //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
            });
          },
        };
  
        
      }
    };
  </code></pre>