Quasar Counter with Dialog - Quasar-framework Typing CST Test

Quasar Counter with Dialog — Quasar-framework Code

Shows the current count in a Quasar dialog.

<template>
<q-page class="flex flex-center">
  <div class="text-center">
    <h2>{{ count }}</h2>
    <q-btn color="primary" @click="increment">+</q-btn>
    <q-btn color="negative" @click="decrement">-</q-btn>
    <q-btn color="secondary" @click="reset">Reset</q-btn>
    <q-btn color="accent" class="q-mt-md" @click="showDialog=true">Show Dialog</q-btn>
  </div>
  <q-dialog v-model="showDialog">
    <q-card class="q-pa-md text-center">
      <q-card-section>Current Count: {{ count }}</q-card-section>
      <q-card-actions align="center">
        <q-btn flat label="Close" color="primary" @click="showDialog=false" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</q-page>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const showDialog = ref(false);
const increment = ()=>count.value++;
const decrement = ()=>count.value--;
const reset = ()=>count.value=0;
</script>

Quasar-framework Language Guide

Quasar Framework is a Vue.js-based framework that allows developers to build high-performance, responsive web apps, mobile apps (via Cordova/Capacitor), and desktop apps (via Electron) using a single codebase.

More Quasar-framework Typing Exercises

Practice Other Languages