vue 2.7 vue-qrcode 2.2.0

[pigping88]

the demo：

<vue-qrcode
value="https://www.1stg.me"
@change="onDataUrlChange"
/>

<script> import VueQrcode from 'vue-qrcode' export default { data() { return { dataUrl: null, } }, components: { VueQrcode, }, methods: { onDataUrlChange(dataUrl) { this.dataUrl = dataUrl }, }, } </script>

the error：
[Vue warn]: Missing required prop: "color"
Vue warn]: Missing required prop: "type"

change demo：

data() {
return {
qrcode: {
color: {
dark: 'black', // 设置二维码的主要颜色
light: 'white' // 设置二维码的背景颜色
}
},
codeText: 'test qrcode text',
no error， but there is no a qrcode in the page

[syafiqmuda]

Hello, for the v2.2.0, can I do like this instead?

<VueQrcode value="Let me be" type="image/png" color="{ dark: '#000000ff', light: '#ffffffff' }" @change="onDataUrlChange" />

[JounQin]

Hello, for the v2.2.0, can I do like this instead?

<VueQrcode value="Let me be" type="image/png" color="{ dark: '#000000ff', light: '#ffffffff' }" @change="onDataUrlChange" />

Sure, does anything work unexpectedly?

[syafiqmuda]

Hello, for the v2.2.0, can I do like this instead?
<VueQrcode value="Let me be" type="image/png" color="{ dark: '#000000ff', light: '#ffffffff' }" @change="onDataUrlChange" />

Sure, does anything work unexpectedly?

I dont know what happen, but it seem the QR wont appear, even copying directly from demo, doesnt do anything. there is no error being display, also when I inspect the element, it show 0x0 size.

[JounQin]

Can you provide an online reproduction?

[JounQin]

@xliamh blocked

[susnux]

For Vue 2.7 this part of the code is invalid:

vue/packages/vue-qrcode/index.ts

Lines 120 to 123 in ef9104a

	h('img', {
	...attrs,
	src: dataUrlRef.value,
	})

For Vue 2.7 it must look like this:

 h('img', { 
   attrs: { ...attrs, src: dataUrlRef.value },
 }) 

[JounQin]

@susnux Interesting, would you like to raise a PR for it?

[susnux]

Probably something like this is needed:

const version = Number(Vue.version.split('.')[0])

if (version === 2) {
  // Vue v2 code
} else {
  // current code
}