Accept number in text prop

[SAbolfazlSH]

Hello there!

I recently encountered an issue while using this library in one of my projects. The problem arises when we attempt to pass a number as text to the component, like so:

<VueQRCodeComponent :text="159"></VueQRCodeComponent>

Upon doing this, the component displays a QR code with a value of nothing! I resolve this problem with by converting all my numbers to string in my project

But I believe this library should ideally support numbers without requiring conversion to strings. Could you provide a fix and update npm package?

And thank you for providing this excellent library :D

[gerardreches]

Hi @SAbolfazlSH !

Thank you for letting me know. The text prop is defined as of type string, thus requiring a string to be passed to it.

You should be getting a warning in your console when you try to use an integer. Could you check that for me?

Also, have you tried the following?

<VueQRCodeComponent text="159"></VueQRCodeComponent>

If your value is static and not a variable, you should be able to remove the colon : (v-bind) and then the number would be automatically passed to the prop as a string instead of an integer.

I always agree to anything that may make the component easier to use. However, I also want to help people understand how Vue works so that they write better code instead of helping them by allowing bad practices from their end and fixing them on the components side 😄

Right now the component should be automatically throwing a warning on the console because the parameter isn't a string. This allows developers to know that they are doing something wrong, so that they can troubleshoot and fix the issue. Vue will also take the value as a string as long as you don't use the : v-bind directive, which in any case it shouldn't be used if you are using a static value, as Vue will think that it is the name of a variable.

My guess is that you are using :text="159" and Vue thinks that 159 is some variable or method, and that's why your QR has an empty value, because that variable/method doesn't exist thus there is no value to show. I think that is what is happening here. Please, try again by removing the : from :text="159". That should do the trick and should be the right way to do it.

Let me know if that worked.

[gerardreches]

@SAbolfazlSH In fact, if you check the documentation page, you will see that I don't use the : except for when I'm binding a variable:

Documentation on Github Pages

[SAbolfazlSH]

Thanks for your response @gerardreches!

But I've just wrote an example, in my project I have many number variables that I can't bind without :text

<template>
  <VueQRCodeComponent :text="myId"></VueQRCodeComponent>
</template>
<script>
import VueQRCodeComponent from 'vue-qrcode-component'
export default {
  name: 'Yay',
  components: { VueQRCodeComponent },
  data: () => ({ myId: 159 })
}
</script>

Right now component will show a qr code of empty instead of 159 (what we expected) Also of course this code will throw a warning and it's completely logical to not accept any types like Objects and Arrays and throw warning, but Numbers is very similar to string it can be fix by using this code

<VueQRCodeComponent :text="myId.toString()"></VueQRCodeComponent>

But also it's hard to find out when to use toString because javascript is not a strong type languge and it's not a good practice to repeat .toString in every :text we use, cause it can make bugs because if I convert everything to string it won't display any warning forever if my variable is not string or number

I think we need to add support numbers in source component like this

...
props: {
  text: {type: [String, Number], required: true},
...

...
this.qrCode = new QRCode(this.$el, {
  text: this.text.toString(),
...

What do you think?