Olá, fiz de uma maneira diferente e gostaria de compartilhar
acabei interpretetando de uma maneira diferente e coloquei no Componente Temporizador ao invez de colocar no Formulario..
passei como props o idProjeto para o componente Temporizador
<div class="column">
<Temporizador :idProjeto="idProjeto" @aoFinalizarTarefa="salvarTarefa" />
</div>
e no componente Temporizador fiz uma condição se esse idProjeto fosse vazio chamava o NOTIFICAR
<template>
<section class="is-flex is-align-items-center is-justify-content-space-between">
<Cronometro :tempoEmSegundos="tempoEmSegundos"/>
<button class="button" @click="iniciar" :disabled="cronometroRodando">
<span class="icon">
<i class="fas fa-play"></i>
</span>
<span>play</span>
</button>
<button class="button" @click="finalizar" :disabled="!cronometroRodando">
<span class="icon">
<i class="fas fa-stop"></i>
</span>
<span>stop</span>
</button>
</section>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Cronometro from "./Cronometro.vue";
import { useStore } from "@/store";
import { NOTIFICAR } from "@/store/tipo-mutacoes";
import { TipoNotificacao } from "@/interfaces/INotificacoes";
export default defineComponent({
name: "Temporizador",
emits: ['aoFinalizarTarefa'],
props:['idProjeto'],
components: {
Cronometro,
},
data () {
return {
tempoEmSegundos: 0,
cronometroRodando: false,
cronometro: 0
}
},
methods: {
iniciar () : void {
if(this.idProjeto === ''){
this.store.commit(NOTIFICAR, {
titulo: 'Atenção',
texto: 'Por favor selecione uma tarefa para iniciar o contador',
tipo: TipoNotificacao.ATENCAO
})
} else {
this.cronometroRodando = true
this.cronometro = setInterval(() => {
this.tempoEmSegundos += 1
}, 1000)
}
},
finalizar () : void {
this.$emit('aoFinalizarTarefa', this.tempoEmSegundos)
this.tempoEmSegundos = 0
this.cronometroRodando = false
clearInterval(this.cronometro)
}
},
setup(){
const store = useStore()
return {
store
}
}
});
</script>
<style scoped>
.button {
margin-left: 8px;
}
</style>