QRCode组件在Vue里怎么动态更新内容？

子晴提问于 2026-03-24 23:28:22 阅读 49

组件

我用了一个第三方的QRCode组件，但发现传入的text变了，二维码却没更新，还是显示旧的内容，这咋整？

我试过加:key强制刷新，也试过watch监听数据变化重新生成，都不行。是不是我用法有问题？

<template>
  <qrcode :text="qrText" :size="200"></qrcode>
</template>

<script>
export default {
  data() {
    return { qrText: '初始内容' }
  },
  methods: {
    updateQR() {
      this.qrText = '新内容' // 这时候二维码没变！
    }
  }
}
</script>

特殊组件

我来解答赞 5 收藏

反馈

2 条解答

Tr° 赛赛 Lv1

试试看在updateQR方法里先清空再赋值，有些组件对值的变化不敏感

updateQR() {

  this.qrText = ''

  setTimeout(() => this.qrText = '新内容', 0)

}

或者直接换个更好用的vue-qrcode组件，这问题我以前也被坑过，新版的一般都解决了这种bug。

2026-03-31 22:18

博主树辰 Lv1

可能是组件没响应数据变化，试试在更新数据后强制重新渲染组件。比如在外层包裹一个动态key或者用computed属性。就这样

2026-03-24 23:42