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>