Quasarでダイアログを表示するサンプルコード

• 概要
• 環境
• サンプルコード
• ちょっと解説
• 参考サイト

概要

q-dialog の使い方をサンプルコード付きで紹介します

環境

• macOS 11.7
• node 18.9.0
• quasar 2.8.2

サンプルコード

• vim src/pages/IndexPage.vue

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn color="white" text-color="black" label="Show" @click="showDialog" />
  </div>
  <q-dialog v-model="dialog" persistent>
    <q-card>
      <q-card-section class="row items-center">
        <q-avatar icon="signal_wifi_off" color="primary" text-color="white" />
        <span class="q-ml-sm">You are currently not connected to any network.</span>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat label="Cancel" color="primary" v-close-popup />
        <q-btn flat label="Turn on Wifi" color="primary" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const dialog = ref(false)

const showDialog = async() => {
  dialog.value = !dialog.value
}
</script>

ちょっと解説

q-dialog の表示非表示は v-model で指定したリアクティブオブジェクトの真偽値で切り替えます

ボタンをクリックしたときに真偽値を切り替えることで動的に切り替えることができます
ボタンクリック時の関数内でリアクティブオブジェクトの値を変更する場合は .value プロパティを使って変更します (直接リアクティブオブジェクトの置き換えは const なのでできない)

q-dialog で persistent を使うとダイアログ内のキャンセルボタンを押すまではダイアログが非表示になりません
確実な入力を求める場合には persistent を使います

また今回のようにボタンクリック時のアクションをわざわざ関数に切り出さなくても @click で直接リアクティブオブジェクトを操作することもできます
しかしその方法だと例えばダイアログ内に表示する内容を動的に変更したい場合に対応できません
なので今回はそういったケースにも対応できるようにわざわざ関数に切り出して表示非表示を切り替えるようにしています

参考サイト

• https://quasar.dev/vue-components/dialog