I am trying to create a QR Code generator that changes every minute. I have created the following code, but am receiving some errors, and just need some help with that final push to get this done.
<script>
import { useQRCode } from '@vueuse/integrations/useQRCode'
import { ref } from 'vue'
const custID = ref('[email protected]')
let getNow = Date.now()
export default {
name: 'QRCode Generator',
data() {
return {
text: `${custID.value}?${getNow.value}`
}
},
created() {
setInterval(this.setQR, 3000)
},
methods: {
getQR() {
useQRCode(this.text)
},
setQR() {
;(getNow.value = Date.now()), this.getQR() // Vue Plugin did this, no idea why?
}
}
}
</script>
<template>
<input id="text" v-model="text" type="text" />
<img :src="this.getQR()" alt="QR Code" />
</template>
<style scoped></style>
Currently I get Uncaught TypeError: Cannot create property 'value' on number
for the getNow
variable, and the QR Code doesn’t actually display, probably because I am calling it wrong, and some of the data is missing.
The way it is supposed to work is that custID
is generated from customer data, so that will be dynamic (more than likely an email address), however the getNow
is just a timestamp I am using to modify the data being fed to the BarCode Generator, to change it on a minute by minute basis. However the current interval is set to 3 seconds so I can see it working without the wait…
The two custID
and getNow
value are combined in the text
variable and passed to the QRCode generator to change what is displayed, I separate them with a ?
.
I’ve tried a few suggestions from StackOverflow, Google and VueSchool, but no luck.
I have been looking at this for quite a while now, and just need some help tweaking the last piece into place.