kz’s blog

興味のあることについて書いていきます。

Vue UI を使ってユーザ管理機能を作る③

www.kz62.net

前回の記事ではユーザ編集機能の一部を作成しました。今回はその続きをやっていきます。

ユーザ追加機能の作成

ユーザ管理画面にて新規登録ボタンを押した時に、編集画面に飛び、ユーザを追加できるようにします。

新規登録ボタン追加

  • ユーザ管理のテンプレートに以下のようにボタンを追加します。
src/views/UserList.vue

<router-link :to="{ name: 'user-edit', params: { id: 0 } }"><button>追加</button></router-link>
  • ユーザIDに「0」を渡すことで新規であると判断させるようにします。

  • 次にストアの mutation にユーザ追加機能を追加します。

src/store.js

    // ユーザ追加
    addUser (state, user) {
      if (!user.name) {
        return
      }
      let id = state.users.length === 0 ? 1 : state.users[state.users.length - 1].id + 1;
      state.users.push({ id: id, name: user.name, created_at: new Date(), updated_at: new Date() })
    },
  • さらに、ユーザ編集画面の完了ボタンを押した時の処理を修正します。
src/views/UserEdit.vue

// 修正前
    complete () {
      this.$store.commit('updUser', this.user)
    }

// 修正後
    complete () {
      if (this.$route.params.id == 0) {
        this.$store.commit('addUser', this.user)
      } else {
        this.$store.commit('updUser', this.user)
      }
    }
  • 動的ルートマッチングで取得したパラメータが0の場合(新規登録ボタンを押して遷移してきた場合)は addUser、それ以外の場合は updUser を呼ぶようにしています。

追加機能の確認

以上で新規登録ボタンを押すことで、テキストに設定した内容が一覧に追加されていると思います。

ユーザ削除機能の作成

ユーザ管理画面の一覧で削除ボタンを押した時に、一覧からユーザを削除することができるようにします。

削除ボタン追加

  • ユーザ管理画面のテンプレートを以下のように修正します。
src/views/UserList.vue

// 修正前
          <th>編集</th>

// 修正後
          <th>編集/削除</th>
src/views/UserList.vue

// 修正前
          <td>
            <router-link :to="{ name: 'user-edit', params: { id: user.id } }"><button>編集</button></router-link>
          </td>

// 修正後
          <td>
            <router-link :to="{ name: 'user-edit', params: { id: user.id } }"><button>編集</button></router-link>
            <button @click="del(user)">削除</button>
          </td>
  • これで編集ボタンの横に削除ボタンが追加されました。

  • 次にストアの mutation にユーザ削除機能を追加します。

src/store.js

    // ユーザ削除
    delUser (state, user) {
      state.users.forEach((o, index) => {
        if (o.id == user.id) {
          state.users.splice(index, 1)
        }
      })
    }
  • 続いて、削除ボタンを押した時の処理を追加します。 ユーザ管理画面のスクリプトに以下を追加します。
src/views/UserEdit.vue

  methods: {
    del (user) {
      this.$store.commit('delUser', user)
    }
  }
  • methods は data () と同じ階層に追加して下さい。

削除機能の確認

以上で削除登録ボタンを押すことで、一覧から削除されていると思います。

終わりに

これでユーザ管理機能の全てを作成し終えました。(条件指定での検索はできませんが...)

CSS は今回はいじっていないので画面レイアウトについては適当です笑

また、コンポーネント等をいまいち活用できていないので、またの機会に記事を書ければと思っています。

今回作成したソースコード

github.com

GitHub Pages

https://kz62123.github.io/sample/user-manager/docs/#/

GitHub Pages の公開方法

www.kz62.net