zukucode
主にWEB関連の情報を技術メモとして発信しています。

Vue.js 汎用的な確認メッセージをモーダルダイアログで定義する

Vue.jsで汎用的な確認メッセージ(confirm)をモーダルダイアログで定義してプログラムから呼び出す方法を紹介します。

以下のソースではVuetifyを使用していますが、CSSフレームワークにかかわらず考え方は同じです。

Vue.js モーダルダイアログをプログラムから呼び出すで紹介した方法をもとに定義します。

コンポーネントの作成

まずはコンポーネントを作成します。

Vue.js モーダルダイアログをプログラムから呼び出すで定義したミックスインを使用しています。

メッセージはプロパティで受け取るようにしています。

また、OKとキャンセルのボタンを押したときのアクションをプロパティで定義するのがポイントです。

Confirm.vue
<template>
  <v-dialog v-model="show" :max-width="400">
    <v-card>
      <v-card-title class="error white--text" primary-title>
        確認メッセージ
      </v-card-title>
      <v-card-text class="pa-4">
        <p>{{ message }}</p>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="ok">
          OK
        </v-btn>
        <v-btn @click="cancel">
          キャンセル
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<style lang="scss" scoped></style>

<script>
import programmatic from './programmatic';

export default {
  mixins: [programmatic],
  props: {
    message: {
      type: String,
      required: true,
    },
    okAction: {
      type: Function,
      required: true,
    },
    cancelAction: {
      type: Function,
      required: true,
    },
  },
  methods: {
    ok() {
      this.okAction();
      this.close();
    },
    cancel() {
      this.cancelAction();
      this.close();
    },
  },
};
</script>

$confirmファンクションを作成

確認メッセージを表示したあとは次の処理に進まないように、Promiseを返すファンクションとして定義します。

OKボタンクリック時はtrue、キャンセルボタンクリック時はfalseを返却するようにします。

import Confirm from 'Confirm.vue';

async $confirm(message) {
  return new Promise((resolve) => {
    const VM = Vue.extend(Confirm);
    new VM({
      parent: this,
      propsData: {
        message,
        okAction: () => resolve(true),
        cancelAction: () => resolve(false),
      },
    });
  }).catch((err) => {
    throw err;
  });
},

呼び出し

以下のように定義します。

呼び出しボタンをクリックすると確認メッセージが表示されることが確認できます。

asyncawaitを使用することにより、コールバックなどを使用せずにシンプルに確認ダイアログの処理を行えます。

<template>
  <v-btn @click="call">
    呼び出し
  </v-btn>
</template>

<script>
export default {
  methods: {
    async call() {
      const result = await this.$confirm('よろしいですか?');
      if (result === true) {
        console.log('OK');
      } else {
        console.log('キャンセル')
      }
    }
  }
}
</script>

関連記事

  • Vue.js モーダルダイアログをプログラムから呼び出す

    Vue.jsでモーダルダイアログをプログラムから呼び出す方法を紹介します。以下のソースではVuetifyを使用していますが、CSSフレームワークにかかわらず考え方は同じです。以下は、Vuetifyの公...


  • webpack lessをImportしてビルドする

    htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...


  • ExtractTextPluginでcssファイルを出力する

    webpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。extract-text-webpack-plu...


  • webpack-dev-serverで開発サーバーを起動する

    webpack-dev-serverで開発サーバーを起動します。vueファイル(単一ファイルコンポーネント)をwebpackでビルドページで紹介したwebpack.config.jsにdevServe...


  • webpack モジュールのパスを絶対パスで指定する方法

    自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...


  • Vuex 厳格(strict)モードでエラーになるよくある原因

    Vuexの厳格(strict)モードでエラーになってしまう原因でよくあるパターンです。stateに格納した配列をソートして表示するときに、stateの値をcomputedやgettersでそのままソー...


  • Vuex stateを作成して各コンポーネントで参照する

    実際にstoreを作成して、各コンポーネントでその値を参照できるようにします。mutations.jsにstateのオブジェクトを定義します。stateがアプリケーション全体の状態を管理します。


  • Vuex mutationでstateの値を変更する

    stateはmutationの処理でしか変更できません。コンポーネントからmutationを実行し、stateの値を更新する方法を紹介します。mutationを作成するにあたって、最初にmutatio...


  • Vuex moduleに定義したstateをコンポーネントで簡単に取得する

    Vuexのモジュールに定義したstateを各コンポーネントで参照する方法を紹介します。各コンポーネントではthis.$store.state.モジュール名で各moduleで定義したstateを取得でき...


  • Vuexとaxiosを連携する

    ajaxの処理が増えるたびに同じmutationを実行するように処理を入れるのは大変なので、axiosの処理でmutationを実行するようにします。axiosにはinterceptorsという機能が...