Quasar Counter with Card Grid - Quasar-framework Typing CST Test

Quasar Counter with Card Grid — Quasar-framework Code

Multiple counters in a Quasar grid layout.

<template>
<q-page class="q-pa-md">
  <q-card v-for="n in 3" :key="n" class="q-ma-sm text-center">
    <q-card-section>
      <h3>Counter {{ n }}: {{ counts[n-1] }}</h3>
    </q-card-section>
    <q-card-actions align="center">
      <q-btn color="primary" @click="increment(n-1)">+</q-btn>
      <q-btn color="negative" @click="decrement(n-1)">-</q-btn>
      <q-btn color="secondary" @click="reset(n-1)">Reset</q-btn>
    </q-card-actions>
  </q-card>
</q-page>
</template>
<script setup>
import { ref } from 'vue';
const counts = ref([0,0,0]);
const increment=(i)=>counts.value[i]++;
const decrement=(i)=>counts.value[i]--;
const reset=(i)=>counts.value[i]=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