JavaScript標準のconfirm()に代わるシンプルなモーダルダイアログコンポーネントの実装

nuxt-vuetify-confirm-dialog-component.md

Nuxt+Vuetifyによるコンポーネントダイアログコンポーネント

JavaScript標準のconfirm()に代わるシンプルなモーダルダイアログコンポーネントの実装。

可変項目

• ダイアログタイトル
• メッセージ
• OKボタン文言
• OKボタン押下時コールバック

実装

components/ConfirmDialog.vue

モーダルダイアログによるダイアログコンポーネント。

<template>
  <v-dialog v-model="dialog" persistent max-width="400px">
    <v-card>
      <v-card-title>
        <span class="headline">{{title}}</span>
      </v-card-title>
      <v-card-text>
        {{message}}
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue darken-1" class="dialog-Button" flat @click="cancel">キャンセル</v-btn>
        <v-btn color="blue darken-1" class="dialog-Button" flat @click="confirm">{{buttonMessage}}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  props: {
    title: String,
    message: String,
    buttonMessage: String
  },
  data() {
    return {
      dialog: false,
    }
  },
  methods: {
    open() {
      this.dialog = true
    },
    cancel() {
      this.dialog = false
    },
    confirm() {
      this.dialog = false
      this.$emit('confirm')
    },
  },
}
</script>

<style scoped>
.dialog-Button {
  font-weight: bold;
}
</style>

pages/test.vue

Data tablesを使ったテスト実装。

<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="companies"
      class="elevation-1"
    >
      <template v-slot:items="props">
        <td class="text-xs-right">{{ props.item.id }}</td>
        <td class="text-xs-right">{{ props.item.companyCode }}</td>
        <td class="text-xs-right">{{ props.item.companyName }}</td>
        <td class="justify-center layout px-0">
          <v-icon
            small
            @click="openDeleteConfirmDialog(props.item)"
          >
            delete
          </v-icon>
        </td>
      </template>
    </v-data-table>

    <ConfirmDialog
      ref="confirm"
      title="会社情報削除"
      :message="deleteMessage"
      buttonMessage="削除"
      @confirm="confirmDeletion"
    >
    </ConfirmDialog>
  </div>
</template>

<script>
import ConfirmDialog from '~/components/ConfirmDialog'

export default {
  components: {
    ConfirmDialog
  },
  async asyncData({ app }) {
    const items = await app.$companyApi.list()
    return {
      companies: items.companies,
    }
  },
  data() {
    return {
      headers: [
        { text: 'id', value: 'id', align: 'left'},
        { text: '会社コード', value: 'companyCode'},
        { text: '会社名', value: 'companyName'},
        { text: 'Actions', value: 'id', sortable: false },
      ],
      companies: [
        {
          id: 1,
          companyCode: 'company1',
          companyName: '会社1',
        },
      ],
      deletedItem: {
        companyName: '',
      },
    }
  },
  computed: {
    deleteMessage() {
      return `${this.deletedItem.companyName} の会社情報を削除します。よろしいですか。`
    },
  },
  methods: {
    openDeleteConfirmDialog(item) {
      this.deletedItem = item
      this.$refs.confirm.open()
    },
    confirmDeletion() {
      const index = this.companies.indexOf(this.deletedItem)
      this.$companyApi.delete(this.deletedItem.id)
        .then(res => {
          this.companies.splice(index, 1)
        })
        .catch(err => {
          throw err
        })
    },
  }
}

参考URL

• nuxt.js, vuetify ダイアログコンポーネント化サンプル - Qiita