在Vue中如何动态设置qr-code文本并绑定API数据生成二维码

开发者阿泽

2026-10-5

动态生成二维码及API数据绑定解决方案

你使用的<qr-code>组件默认仅在初始化时读取一次text属性值，不支持属性变更后的响应式自动重绘，所以动态绑定值变化时不会重新生成二维码，可通过以下方案解决：

方案1：通过v-if控制组件重绘（通用性最高）
赋值完成后销毁重建组件即可触发重新生成二维码，示例代码如下：

<template>
  <!-- 输入框绑定也会自动触发二维码重绘 -->
  <input type="text" v-model="message">
  <!-- v-if绑定同一个变量，值变化时组件会自动销毁重建 -->
  <qr-code v-if="message" :text="message"></qr-code>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    async getApiData() {
      // 调用你的业务接口获取数据
      const apiRes = await 你的接口请求逻辑()
      // 赋值后qr-code组件会自动重绘
      this.message = apiRes.data.需要生成二维码的字段
    }
  },
  mounted() {
    this.getApiData()
  }
}
</script>

方案2：调用组件实例内置更新方法
若你使用的qr-code组件提供了update/render等手动刷新方法，可以直接通过组件实例调用，示例代码如下：
```
<qr-code ref="qrRef" :text="message"></qr-code>
```
给API返回数据赋值后添加以下代码即可：
```
this.$nextTick(() => {
  this.$refs.qrRef.update()
})
```