Django

VueJsクリックされたindexやobject情報を取得(Total:27day81h)

vuejsのv-forで繰り返し処理をしているアイテムの情報を取得する

シフト情報をクリックしたら、編集する画面を起動するを実装をしていこうと思います。

クリックされたアイテムがどのアイテムか取得する

実装しようと思うと

ポイント

クリックされたスケジュールを特定するIDを取得する

モーダルウインドウでスケジュール編集画面を起動し、情報を表示する

モーダルウインドウで編集する

Djnagoに更新処理を投げる

エラーならエラーを表示する

更新成功ならモーダルウインドウを閉じる

Vueでもっている情報を更新してデータベースと整合性をとっておく(version情報もインクリメント)

ざっとこんな感じでしょうか。

          <td v-for="(schedule, index) in useryear.schedule" :key="index"
            @click="clickCell(schedule, index)"
            > ↑これでクリックされたスケジュール情報とインデックスがclickイベントに渡される
            <div v-bind:class="schedule.shisetsu1.color">
              {{ schedule.shift1.name }}
            </div>
            <div v-if="schedule.shift2 !== null">
              <div v-bind:class="schedule.shisetsu1.color">
                {{ schedule.shift2.name }}
              </div>
            </div>
            <div v-if="schedule.shift3 !== null">
              <div v-bind:class="schedule.shisetsu1.color">
                {{ schedule.shift3.name }}
              </div>
            </div>
          </td>
  // セルをクリックするとスケジュールを変更画面を起動する
  clickCell(schedule, index) {
    console.log(schedule.schedule_id, index)
  }

ちゃんと取得できているか、コンソールログで出力してみる。

スケジュールID情報とindexが表示されました!

-Django

© 2022 ごろう@縁紡ぐ