VueJS - v-用于从道具嵌套对象中获取未定义的值答案

【问题标题】：VueJS - v-for getting undefined value from props nested objectVueJS - v-用于从道具嵌套对象中获取未定义的值
【发布时间】：2021-09-01 23:12:55
【问题描述】：

我是 VueJS 的新手。

我的组件的模板和道具如下

<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>

如果我运行代码，我会得到

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

我的接近正确吗？或者我该如何实现？

【问题讨论】：

你的props定义错误，请分享一下你是如何使用父组件的
@BoussadjraBrahim 我已经用完整的组件更新了这个问题。你能查一下吗？

标签： vue.js vuejs2 vue-component

【解决方案1】：

props 是从父组件传递给子组件的数据，如果您想定义本地属性，您应该在 data 选项中定义它们，例如：

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>

【讨论】：