Блог

Главная - Вопросы по программированию - VueJS — v-для получения неопределенного значения из вложенного объекта props

VueJS — v-для получения неопределенного значения из вложенного объекта props

#vue.js #vuejs2 #vue-component

Вопрос:

Я новичок в Вейсе.

Шаблон моего компонента и реквизиты приведены ниже

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

Правильно ли я подхожу? Или как мне этого добиться?

Комментарии:

1. Вы неправильно определяете реквизиты, пожалуйста, поделитесь, как вы используете компонент в родительском

2. @Буссаджрабрахим Я обновил вопрос полным компонентом. Не могли бы вы, пожалуйста, проверить?

Ответ №1:

Реквизиты-это данные, передаваемые от родительского компонента к дочернему, если вы хотите определить локальные свойства, вы должны определить их внутри 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>
Метки: