Vue动态二维码生成器故障求助：undefined值与显示问题

你的代码存在几个核心问题，导致出现undefined?undefined和二维码无法显示的情况，以下是修正后的完整代码及问题说明：

修正后的组合式API实现（推荐） #

<script>
import { useQRCode } from '@vueuse/integrations/useQRCode'
import { ref, computed, onMounted, onUnmounted } from 'vue'

export default {
  name: 'QRCodeGenerator',
  setup() {
    // 定义响应式变量
    const custID = ref('customer@email.com')
    const getNow = ref(Date.now())

    // 动态拼接响应式文本
    const text = computed(() => `${custID.value}?${getNow.value}`)

    // 获取响应式二维码URL
    const qrCodeUrl = useQRCode(text)

    let intervalId = null

    // 更新时间戳的方法
    const setQR = () => {
      getNow.value = Date.now()
    }

    // 挂载时启动定时器，卸载时清理
    onMounted(() => {
      intervalId = setInterval(setQR, 3000)
    })

    onUnmounted(() => {
      clearInterval(intervalId)
    })

    return {
      text,
      qrCodeUrl,
      custID
    }
  }
}
</script>

<template>
  <input v-model="text" type="text" />
  <img :src="qrCodeUrl" alt="QR Code" />
</template>

<style scoped></style>

关键修改点说明 #

• 响应式变量正确定义：改用组合式API的ref，适配VueUse组合式函数的用法，避免选项式与组合式混用的冲突。
• 动态文本计算：用computed计算属性生成text，确保custID或getNow更新时，文本自动同步。
• useQRCode正确调用：该函数接收响应式文本后，返回响应式的二维码URL，直接绑定到图片src即可。
• 定时器生命周期管理：在组件挂载时启动定时器，卸载时清理，避免内存泄漏。
• 赋值逻辑修复：更新时间戳时直接修改getNow.value，而非重新创建ref对象。

选项式API兼容实现 #

如果习惯使用选项式API，可调整为如下代码：

<script>
import { useQRCode } from '@vueuse/integrations/useQRCode'

export default {
  name: 'QRCodeGenerator',
  data() {
    return {
      custID: 'customer@email.com',
      getNow: Date.now()
    }
  },
  computed: {
    text() {
      return `${this.custID}?${this.getNow}`
    },
    qrCodeUrl() {
      return useQRCode(this.text).value
    }
  },
  mounted() {
    this.intervalId = setInterval(() => {
      this.getNow = Date.now()
    }, 3000)
  },
  beforeUnmount() {
    clearInterval(this.intervalId)
  }
}
</script>

<template>
  <input v-model="text" type="text" />
  <img :src="qrCodeUrl" alt="QR Code" />
</template>

<style scoped></style>

内容的提问来源于stack exchange，提问作者Takuhii