Vue Multi Counter - Nativescript Typing CST Test

Vue Multi Counter — Nativescript Code

Multiple independent counters in a single page.

<template>
	<Page class="page">
		<ActionBar title="Multi Counter" class="action-bar" />
		<StackLayout class="container" horizontalAlignment="center" verticalAlignment="center">
		<StackLayout v-for="(c, index) in counters" :key="index" class="counter-block">
		<Label :text="`Counter ${index+1}: ${c}`" class="counter-text" />
		<Button text="+" @tap="() => increment(index)" class="btn-primary" />
		</StackLayout>
		</StackLayout>
	</Page>
</template>

<script>
import { ref } from 'vue';
export default {
	setup() {
		const counters = ref([0,0,0]);
		const increment = (i) => counters.value[i]++;
		return { counters, increment };
	}
};
</script>

<style scoped>
	.page { background-color: #fff; color: #000; }
	.container { margin-top: 50px; text-align: center; }
	.btn-primary { margin: 5px; }
	.counter-text { font-size: 20px; margin-bottom: 10px; }
</style>

Nativescript Language Guide

NativeScript is an open-source framework for building truly native mobile applications using JavaScript, TypeScript, Angular, or Vue. It allows developers to write cross-platform apps that access native APIs directly without using WebViews.

More Nativescript Typing Exercises

Practice Other Languages