【TODOリスト第8回】編集モーダル - スマレジエンジニアyushiのブログ

引き続きTODOリストを作っていきます。

yushi-dev.hatenablog.com

前回追加したBulmaを活用して、編集のモーダルウインドウを追加します。

完成品はこんな感じです。

f:id:yushi0:20210207193831p:plain

そしてPull Requestはこちらです。

Edit modal by nek0meshi · Pull Request #9 · nek0meshi/todo-list · GitHub

EditModal.vue

モーダルは1つのコンポーネントとして作成します。

https://github.com/nek0meshi/todo-list/blob/d9188cf4f52b6dd73c2da69698c4c47b13c3be1d/frontend/src/components/EditModal.vue

propsは、下記の2つ

show ... モーダルを表示するかどうか
text ... 表示時点での文言

表示・非表示は、親コンポーネントで管理させます。閉じるボタンがクリックされたような場合は、emitで親コンポーネントに報せます。

      this.$emit('close')

表示時点で、受け取ったtextを一旦コピーしておきます。

  watch: {
    show(val) {
      if (val) {
        this.innerText = this.text
      }
    }
  },

この書き方は結構微妙だと思っていて、showと同様親コンポーネントで管理しちゃう方法もあり得ます。

表示コンポーネントにどこまでロジックを持たせるかは悩ましいところです。

親コンポーネントは下記の感じです。

<template>
    <EditModal
      :show="showEditModal"
      :text="editText"
      @save="saveEdit"
      @close="showEditModal = false"
    />
</template>

export default {
  data () {
    return {
      showEditModal: false,
      editId: null,
    }
  },
  computed: {
    editText() {
      return this.list.find(({ id }) => id === this.editId)?.name
    }
  }
}