How to use the props in vue component?

Question

I try to use a prop in a computed value and i keep getting the error:

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined" found in ---> at src/cmps/space-details/space-imgs.vue at src/pages/space-details.vue at src/App.vue

Maybe i'm using the prop wrong? the component:

<template>
  <div v-if="imgUrls.length" class="space-imgs" :class="pics">
    <img :src="img" v-for="(img, idx) in imgUrls.slice(0, 5)" :key="idx" />
  </div>
</template>

<script>
export default {
  props: { imgUrls: Array },

  computed: {
    pics() {
      return `pics-${this.imgUrls.length}`;
    },
  },
};
</script>

and this is how i pass the prop:

    <space-imgs :imgUrls="space.imgUrls" />

Thanks

Answer 1

Your template will be first rendered before the prop is passed, making imgUrls undefined. So just do this: v-if="imgUrls" .

Answer 2

Pass the prop like below. This will work.

<space-imgs :img-urls="space.imgUrls" />

For avoiding wrong prop data in component. initialize prop with default value.

props: { 
 imgUrls: {
     type: Array,
     default: [],
     required: true
 } 
}