I have created a unique class with properties and I am trying to figure out how to update my vue file to reflect any changes made to the properties. I have simplified the class for now, but plan to expand it with more properties in the future.
In this specific case, I want a button to change its color and icon when clicked by the user, based on the value of the 'isPlaying' property in my custom class Stopwatch.
main.vue
<template>
<q-page padding class="text-center q-pa-md">
<q-btn
:color="sw.isPlaying ? 'red' : 'green'"
:icon="sw.isPlaying ? 'mdi-pause' : 'mdi-play'"
@click="sw.toggle()"
/>
</q-page>
</template>
<script lang="ts">
import {
defineComponent,
ref,
computed,
onMounted,
onUnmounted
} from '@vue/composition-api';
import Stopwatch from 'src/utils/stopwatch';
export default defineComponent({
name: 'Stopwatch',
components: {},
setup() {
const sw = computed(() => new Stopwatch());
return {
sw
};
}
});
</script>
stopwatch.ts
export default class Stopwatch {
isPlaying: boolean;
constructor() {
this.isPlaying = false;
}
// Start timer or continue from paused time
startTimer() {
this.isPlaying = true;
console.log('play');
}
// Stop/Pause the timer
stopTimer() {
this.isPlaying = false;
console.log('stop');
}
// Start/Stop timer or continue from paused time
toggle() {
if (this.isPlaying) {
this.stopTimer();
} else {
this.startTimer();
}
}
}