Can't display datetime from v-for

Question

I'm trying to show the datatime in a v-for, but it just keeps showing the same time over and over.

Is there a way to do this?

v-for -

<div class="location-box-container">
  <ul class="location-box-list">
    <ol v-for="(location, index) in lineStringData" :key="lineStringData.id">
      <p class="locations">{{ location_time }}  New Location</p>
    </ol>
  </ul>
</div>

JS -

  data() {
    return {
      location_time: new Date().toLocaleTimeString(),
    }
  },

Answer 1

Use a method to lookup time. Not sure where you are storing the time, but you can look up timezone from coords if needed.

<div class="location-box-container">
  <ul class="location-box-list">
    <ol v-for="(location, index) in lineStringData" :key="lineStringData.id">
      <p class="locations">{{ getTime(location) }}  New Location</p>
    </ol>
  </ul>
</div>

methods: {
    getTime(location) {
      // lookup your timezone, etc here.
      return new Date(location.theTime).toLocaleTimeString()
    }
}