Vue 3 - Referencing composable function in loop - value returned in quotation marks and warning Maximum recursive updates exceeded in component

Viewed 15

I'm attempting to call a composable function to convert & format a proto time object into a time string in my Vue 3 project. This function is called as many times as there are items in the array.

When I import the composable function and reference it in the template code, I get the error "Maximum recursive updates exceeded in component", as well as my result returned wrapped in quotation marks.

If I write this function manually in the component as a method, I get no such error, and the values are returned unwrapped.

My question is, why does this happen? I'm not the most well versed with composables yet, so I assume that there is some error in the way that I create and reference my composable. And why is the value returned in quotation marks? The only information I could find this is here but it did not solve my question sadly.

My composable :

import { ref, readonly } from "vue";
import moment from "moment";
import "moment-timezone";

/*
 * convertTime inputs
 * - proto timestamp (seconds and milliseconds)
 * - format for moment object
 */
export function useAdjustTime() {
  const timeZone = ref("Europe/Berlin");
  const adjustedTime = ref("");

  function convertTime(t, format = "MMM DD, YYYY hh:mm A z") {
    let momentTime = moment.utc(t.seconds * 1000 + t.nanos / 1000000);
    adjustedTime.value = momentTime.tz(timeZone.value).format(format);
    return adjustedTime;
  }

  return { timeZone, adjustedTime: readonly(adjustedTime), convertTime };
}

And my vue file where this is referenced:

<template>
  <div class="mb-5">
    <div v-for="(job, i) in jobs" :key="i + 'testjob'">
      {{ convertProtoToDate(job.firstVial, "ll") }} <- THIS WORKS just fine
      {{ convertTime(job.firstVial, "ll") }} <- THIS line produces the errors above
    </div>
  </div>
</template>
<script>
import { useAdjustTime } from "@/composables/useAdjustTime";
import moment from "moment";

export default {
  setup() {
    const { convertTime } = useAdjustTime();
    return {
      convertTime,
    };
  },
  props: {
    jobs: Array,
  },
  methods: {
    convertProtoToDate(date, format) {
      return moment
        .utc(date.seconds * 1000 + date.nanos / 1000000)
        .format(format);
    },
  },
};
</script>
0 Answers
Related