CODEWITHSUNDEEP
javascriptvue.jsvuejs3vue-composition-api
rencis.a
rencis.a

Reputation: 31

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

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?

Upvotes: 2

Views: 192

Answers (4)

tog
tog

Reputation: 31

<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>

Upvotes: 0

4yp
4yp

Reputation: 11

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>

Upvotes: 0

Andres Abadia
Andres Abadia

Reputation: 833

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

Upvotes: 0

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

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>

Upvotes: 3

Related Questions