[Vue warn]: Error in render: “TypeError: Cannot read property 'shipperid' of undefined”

Question

I know this has been asked before but nothing seems to match my problem. I can't figure out what is going on.

Error

[Vue warn]: Error in render: "TypeError: Cannot read property 'shipperid' of undefined"

I'm retrieving the data from an API as a state (vuex) not local data.

  <template>
    <div>Hello
      <div>{{allBatches[0].shipperid}}</div>
    </div>
  </template>
  <script>
      import { mapGetters, mapActions } from "vuex";
      export default {
        name: "batching",
        components: {},
        props: {},
        data: function() {
          return {};
        },
        computed: {
          ...mapGetters(["allBatches"])
        },
        methods: {
          ...mapActions(["fetchBatches"])
        },
        created() {
          this.fetchBatches();
        }
      };
  </script>

The data is coming, but the error is bugging me.

Also, if I edit it, this error happens. I kind of understand what they want me to do, but I don't think I know how. The defaultvalue is coming from the reusable component. (All added to the sandbox) I'd appreciate any help

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "defaultvalue"

Here is a minimal copy of my system in a sandbox

allBatches is empty when the component renders, it gets data after fetchBatches finishes — Chris Li

Aniket Pawar Aniket Pawar · Accepted Answer · 2019-08-28T14:20:22

You will need to add v-if condition in your template due to fact that when your component is created/mounted, you will not have any detail in vuex's allBatches getters if the API is still running in background.

So modify your template with,

 <div>Hello
     <div v-if="allBatches">{{allBatches[0].shipperid}}</div>
 </div>

whenever the API call will complete, allBatches will be changed & due to reactivity it will re-render the html with changes of allBatches.

[Vue warn]: Error in render: “TypeError: Cannot read property 'shipperid' of undefined”

1 Answers