50_schedule_setting_modal / タスク設定モーダルを再設定

[hasyrails]

クリックしたスケジュール内容を モーダル(ScheduleSettingModal)に表示させる

[hasyrails]

実装で苦戦した理由

下記ができていなかった

ScheduleSettingModalに渡すpropsに名前をつけていなかった

// app/javascript/components/GanttChart.vue

<div>
    <ScheduleSettingModal
    :devidedSchedule="scheduleDetail"  // これ
    v-for="devidedSchedule in devidedSchedules"
    :key="devidedSchedule.id"
    v-if="scheduleSettingModalFlag"
    @clickCloseButton="closeScheduleSettingModal"
    ></ScheduleSettingModal>
</div>

props, v-forの記述順序も関係ある？

devidedSchedulesの情報を表示できている <Schedule>コンポーネントと同じ順序にしたら表示できた

同じ順序にする前は表示できなかったので 関係ありそう

モーダルを開くメソッドに引数としてdevidedScheduleを渡していなかった

// app/javascript/components/Schedule.vue

methods:{
  openScheduleSettingModal(devidedSchedule){
      this.$emit('clickScheduleSettingButton', this.devidedSchedule)
      // $emitの第2引数で渡すデータを定義
    },
}

モーダルを開くメソッド発火時にScheduleSettingModalのpropsを変更する

// app/javascript/components/GanttChart.vue

 methods: {
    openScheduleSettingModal(devidedSchedule){
      this.scheduleSettingModalFlag = true
      this.scheduleDetail = devidedSchedule    // これ
    },
 }