UPDATE: The initial code has been updated to implement the recommendations provided.
I am currently working on a QR Code generator that updates every minute. Although I have developed the code below, I am encountering some errors and could use some assistance completing this task.
<script>
import { useQRCode } from '@vueuse/integrations/useQRCode'
import { ref } from 'vue'
export default {
name: 'QRCode Generator',
data() {
return {
custID: ref('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34574147405b595146745159555d581a575b59">[email protected]</a>'),
getNow: ref(Date.now()),
text: `${this.custID}?${this.getNow}`
}
},
created() {
setInterval(this.setQR, 3000)
},
methods: {
getQR() {
useQRCode(this.text)
},
setQR() {
this.getNow = ref(Date.now())
}
}
}
</script>
<template>
<input id="text" v-model="text" type="text" />
<img :src="getQR" alt="QR Code" />
</template>
<style scoped></style>
My current issue is that I am getting undefined?undefined for my QRCode string, which may be due to incorrect callouts and undefined data.
The expected functionality involves generating a dynamic custID based on customer information (commonly an email address), while the getNow variable represents a timestamp used to modify the data fed into the Barcode Generator every minute. Note that the interval is set at 3 seconds for immediate observation purposes...
The values of custID and getNow are concatenated in the text variable before being passed to the QRCode generator to update the displayed content, utilizing a ? separator.
Despite experimenting with advice from various sources like StackOverflow, Google, and VueSchool, I haven't achieved a solution yet.
This problem has consumed a considerable amount of time, and I am seeking guidance to finalize the implementation.