はじめに vuexを使ってタスクの更新と削除機能を実装します。 親コンポーネントから詳細ページモーダルを呼び出して、 その詳細ページに編集ボタンと削除ボタンがあり、 編集ボタンを押すと、編集ページのモーダルが表示される。 タスク編集ページを作成 <template> <div :id="'task-edit-modal-' + task.id"> <div class="modal" @click.self="handleCloseModal"> <div class="modal-dialog"> <div class="modal-content"></div></div></div></div></template>…

Object.assign Object.assignはオブジェクトをマージすることができます。 const object_1 = { a: 1, b: 2 } const object_2 = { c: 3, d: 4 } const united_object = Object.assign(object_1, object_2) console.log(object_1) => { a: 1, b: 2, c: 3, d: 4…

はじめに 状態管理ライブラリのvuexを使ってデータを管理します。 vuexの設定 まずはvuexをインストールします。 $ yarn add vuex vuexの設定ファイルを作成します。 $ touch app/javascript/store/index.js import Vue from 'vue' import Vuex from 'vuex' …

はじめに タスクを追加するページのモーダルをコンポーネントとして作成します。 タスク追加ページを作成 $ touch app/javascript/pages/task/components/TaskCreateModal.vue <template> <transition name="fade"> <div id="task-create-modal"> <div class="modal" @click.self="handleCloseModal"> // モーダル以外の部分をクリックした時にモーダルを閉じる <div class="modal-dialog"> </div></div></div></transition></template>