VueJS - v-for getting undefined value from props nested object

Question

I'm new to VueJS.

My component's template and the props are below

<template>
<div>
  <label>WorkHours</label>

  <div v-for="(data, day) in value.config.workingHours">
    <label>{{day}}</label>
    <hour-range-selector
      :value="[data.timeFrom, data.timeTo]"
      class="rangeText"
      :mandatory="true"
      :placeholder="placeholder"
      :full-range="['00:00', '23:59']"
      @input="(val) => workingHoursChanged(val, day)"
    />
  </div>
</div>
</template>

<script>
import HourRangeSelector from '..../HoursRangeSelector';

export default {
  name: 'WorkingDaysSelector',
  components: {HourRangeSelector},
  props: {
    value: {
      config:{
        workingHours: {
          monday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          },
          tuesday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          },
          wednesday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          },
          thursday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          },
          friday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          },
          saturday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          },
          sunday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          }
        }
      }
    },
    placeholder: {
      type: Array,
      default: () => (['From', 'To']),
    },
  },
  data() {
    return {
      fullRange: ['00:00', '23:59'],
    };
  },
  methods:{
    workingHoursChanged(val, day){
      //IN PROGRESS
  }
};
</script>

<style scoped>

</style>

If I run the code, I'm getting

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'workingHours' of undefined"

Am I approaching correctly? Or How do I achieve this?

Answer 1

Props are the data passed from the parent component to the child one, if you want to define local properties you should define them inside the data option like :

export default {
  name: 'WorkingDaysSelector',
  components: {HourRangeSelector},
  props: {
   
    placeholder: {
      type: Array,
      default: () => (['From', 'To']),
    },
  },
  data() {
    return {
    value: {
      config:{
        workingHours: {
          monday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          },
          tuesday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          },
          wednesday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          },
          thursday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          },
          friday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          },
          saturday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          },
          sunday: {
            available: false,
            timeFrom: '',
            timeTo: '',
          }
        }
      }
    },
      fullRange: ['00:00', '23:59'],
    };
  },
  methods:{
    workingHoursChanged(val, day){
      //IN PROGRESS
  }
};
</script>

<style scoped>

</style>