53_schedule_edit_modal / スケジュール編集モーダルを実装

[hasyrails]

スケジュール編集モーダルを実装する

編集モーダルへの遷移

スケジュール詳細モーダル(ScheduleSettingModal) → スケジュール編集モーダルへの遷移

スケジュールの更新

編集フォームに入力、 更新ボタンで予定更新

[hasyrails]

注意

devidedSchedulesは直接変更できない

スケジュール更新メソッドを devidedScheduleを変更するように記述

methods:{
  updateSchedule(devidedSchedule){
    const index = this.devidedSchedules.findIndex(devidedSchedule => {
        return devidedSchedule.id == schedule.id
      })
      this.devidedSchedules.splice(index, 1, schedule)
      return this.devidedSchedules
  }
}

→TypeError: Cannot read property '_wrapper' of undefinedが発生

56 と同じエラー

今回、store/stateで普通に定義されているschedulesではなく schedulesをメソッドで操作して作り出した 副産物的なdevidedSchedulesをそのまま変更しようとしていることが原因。

devidedSchedulesのstateとしての登録のされ方について考える

アプリ立ち上げ・起動時

• stateであるschedulesがある
• createdDevidedSchedules()メソッドで作られる
• devidedSchedulesがstateとして登録される

  devidedSchedulesを変更するには？？？

  エラー発生の現状

• stateとして登録されているdevidedSchedulesをそのまま変更したい
• 変更のメソッド発火！
• TypeError: Cannot read property '_wrapper' of undefinedのエラーが発生？

  正しくは

• schedulesが変更される
• createSchedulesが発火する
• devidedSchedulesもschedulesの変更に伴った変更された内容で作られる というように、 おおもとのschedulesが変更しなければならない

つまり

devidedSchedulesは schedulesをもとに作っているのに おおもとのschedulesを変更していないのにdevidedSchedules単体を変更するのは無理です という旨のエラーが 今回のTypeError: Cannot read property '_wrapper' of undefined

[hasyrails]

試しに‥

schedulesを変更する旨の処理を updateSchedules()メソッドに記述してみる

updateSchedule(schedule){

    // == devidedSchedulesは直接変更できない == 
      // const index = this.devidedSchedules.findIndex(devidedSchedule => {
      //   return devidedSchedule.id == schedule.id
      // })
      // this.devidedSchedules.splice(index, 1, schedule)
      // return this.devidedSchedules

　// == schedulesを変更するようなメソッドにしてみる ==
      this.schedules.splice(2)
    },

変更成功

重複してしまう内容が現れるのは idの照合で同一の内容を複数作らないよう上書きする処理とする必要がある

[hasyrails]

ScheduleEditModalにはscheduleを変更するフォームとする必要あり？

変更が１文字(1回)しか反映されない

[hasyrails]

やはりエラー発生

TypeError: Cannot read property '_wrapper' of undefined
    at remove$2 (vue.runtime.esm.js:6942)
    at updateListeners (vue.runtime.esm.js:2259)

scheduleの変更と devidedSchedulesの変更が混在するためのエラー？

[hasyrails]

要変更点

v-forによるレンダリング(表示)に使うデータと formで変更を加えるデータとして行き来させるpropsを分けること

<div>
    <ScheduleSettingModal
    :devidedSchedule="scheduleDetail"  // ここが誤り。propsとしてdevidedSchedulesを渡しても直接変更できない
    v-for="devidedSchedule in devidedSchedules"  // ここは正しいはず(変更不要)
    :key="devidedSchedule.id"  // ここは正しいはず(変更不要)
    v-if="scheduleSettingModalFlag"
    @clickCloseButton="closeScheduleSettingModal"
    @clickScheduleEditButton="openScheduleEditModal(scheduleDetail)"
    ></ScheduleSettingModal>
  </div>
  <div>
    <ScheduleEditModal
    v-for="schedule in schedules"  
    :schedule="editSchedule"　
    :key="schedule.id"
    v-if="scheduleEditModalFlag"
    @clickScheduleUpdateButton="updateSchedule"
    @clickScheduleEditModalCloseButton="closeScheduleEditModal"
    ></ScheduleEditModal>
  </div>

[hasyrails]

そもそも

現状

• devidedSchedulesは変更できない
• カレンダー上の予定は 　 v-for="devidedSchedule in devidedSchedules"で 　リストレンダリングさせている → schedulesを変更する実装にしづらい（というより、できない？）

このように変更できないか

• schedulesは変更できる
• カレンダー上の予定を v-for = "schedule in schedules" + v-if の条件分岐で 　リストレンダリングさせる