2022-03-17 22:17:59 +00:00
|
|
|
<script setup lang="ts">
|
2023-01-22 16:46:45 +00:00
|
|
|
// eslint-disable-next-line vue/no-setup-props-destructure
|
|
|
|
const { multiplier } = defineProps<{
|
|
|
|
multiplier: number
|
2022-03-17 22:17:59 +00:00
|
|
|
}>()
|
2023-01-22 16:46:45 +00:00
|
|
|
const count = $ref(12)
|
|
|
|
const doubled = $computed(() => count * multiplier)
|
2022-03-17 22:17:59 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2023-01-22 16:46:45 +00:00
|
|
|
<div class="sugar-counter">
|
2022-03-17 22:17:59 +00:00
|
|
|
Sugar Counter {{ count }} x {{ multiplier }} = {{ doubled }}
|
2023-01-22 16:46:45 +00:00
|
|
|
<button @click="count += 1">
|
|
|
|
Inc
|
|
|
|
</button>
|
2022-03-17 22:17:59 +00:00
|
|
|
</div>
|
|
|
|
</template>
|