Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Sugestão] Mover mais responsabilidades para o componente filho

Acho que seria mais interessante mover todo o controle do tempo para o componente Cronometro em vez de só a exibição do tempo. Aí o Form apenas repassaria a chamada do iniciar/parar para o componente filho:

Cronômetro

 <template>
  <section>
    <b>{{ elapsed }}</b>
  </section>
</template>

<script>
export default {
  name: "Timer",
  data() {
    return {
      timeInSeconds: 0,
    };
  },
  computed: {
    elapsed() {
      return (new Date(this.timeInSeconds * 1000).toISOString()).substring(11, 19);
    },
  },
  methods: {
    start() {
      this.interval = this.interval || setInterval(() => this.timeInSeconds++, 1000);
    },
    stop() {
      clearInterval(this.interval);
    }
  }
}
</script>

Form

<template>
  <div class="box">
    <div class="columns">
      <!-- ... -->
      <div class="column is-flex is-align-items-center is-justify-content-space-between">
        <Timer ref="timer"/>
        <button type="button" class="button" @click="start">
          <span class="icon">
            <i class="fas fa-play"></i>
          </span>
          <span>Start</span>
        </button>
        <button type="button" class="button" @click="stop">
          <span class="icon">
            <i class="fas fa-stop"></i>
          </span>
          <span>Stop</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import Timer from "./Timer.vue";

export default {
  name: "Form",
  components: {Timer},
  methods: {
    start() {
      this.$refs.timer.start();
    },
    stop() {
      this.$refs.timer.stop();
    }
  }
}
</script>
1 resposta
solução!

Acabei de ver que tem algo assim na aula seguinte... kkkk