Why isn't my function to add time to my clock, working?

Question

I am learning Vue.JS and for my first project I am trying to make a digital clock using Composition API, the problem I ran into is, that it seems the function won't add time for my clock.

Here is my code:

<template>
<div class="clock">
  <div class="time">
    <span>{{time}}</span>
  </div>
</div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'App',
  setup(){
     let clock = ref(new Date())
     let time = clock.value.toLocaleTimeString('lv-LV')

    const showLocalTime = function(){
        setInterval(
          time,1000)
    };
   
    onMounted(() => {
      showLocalTime()
    })

    return{
      time
    }

  }

}
</script>

I have also tried replacing onMounted with onBeforeMount but that didn't help either, could you help me understand why it isn't working?

Answer 1

You need to update time:

 const { ref, onBeforeUnmount } = Vue const app = Vue.createApp({ setup(){ const time = ref((new Date()).toLocaleTimeString('lv-LV')) const updateCurrentTime = () => { time.value = (new Date()).toLocaleTimeString('lv-LV') } const updateTimeInterval = setInterval(updateCurrentTime, 1000) onBeforeUnmount(() => clearInterval(updateTimeInterval)) return { time } } }) app.mount('#demo')

 <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <div class="clock"> <div class="time"> <span>{{ time }}</span> </div> </div> </div>

Answer 2

There is no need for clock to be a ref since this value is not changing in the template. On the other hand time should be a ref since this is being updated every second.

On the interval you should update with the current Date. For that you need to call new Date() again in order to get the actual date otherwise you are getting the date from a second ago and updating the time with that old date.

The onMounted hook is not needed since you're changing only a variable.

Your setup() could look like this:

setup() {
    let now = new Date();
    const time = ref(now.toLocaleTimeString("lv-LV"));

    setInterval(() => {
      now = new Date();
      time.value = now.toLocaleTimeString("lv-LV");
    }, 1000);

    return {
      time,
    };
  },

Here a working example to play around

Answer 3

just make time ref

<template>
  <div class="clock">
    <div class="time">
      <span>{{ time }}</span>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    let time = ref(new Date().toLocaleTimeString('lv-LV'))
    setInterval(() => time.value = new Date().toLocaleTimeString('lv-LV'), 1000)
    return { time }
  }
}
</script>

Answer 4

<template>
  <div class="clock">
    <div class="time">
      <h2>clock</h2>
      <span>{{ clock }}</span>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'App',
  setup() {
    let clock = ref()
    let time = () => {
      clock.value = new Date().toLocaleTimeString('lv-LV')
    }

    time()

    const showLocalTime = function () {
      setInterval(
          () => {
            time()
          }, 1000)
    };

    onMounted(() => {
      showLocalTime()
    })

    return {
      clock
    }

  }

}
</script>