Skip to content

Commit

Permalink
Refactor Vue example to use <script setup> (#9379)
Browse files Browse the repository at this point in the history
  • Loading branch information
morinokami authored Dec 11, 2023
1 parent bebf5cf commit a0dc4a4
Showing 1 changed file with 10 additions and 19 deletions.
29 changes: 10 additions & 19 deletions examples/framework-vue/src/components/Counter.vue
Original file line number Diff line number Diff line change
@@ -1,31 +1,22 @@
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
const add = () => count.value++;
const subtract = () => count.value--;
</script>

<template>
<div class="counter">
<button @click="subtract()">-</button>
<button @click="subtract">-</button>
<pre>{{ count }}</pre>
<button @click="add()">+</button>
<button @click="add">+</button>
</div>
<div class="counter-message">
<slot />
</div>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const add = () => (count.value = count.value + 1);
const subtract = () => (count.value = count.value - 1);
return {
count,
add,
subtract,
};
},
};
</script>

<style>
.counter {
display: grid;
Expand Down

0 comments on commit a0dc4a4

Please sign in to comment.