vue项目，页面中有两个按钮分别支付不同的金额。点击按钮会调用接口弹窗弹出二维码。现在有一个问题是当点击第一个支付按钮弹出二维码后，再点击第二个支付按钮时，二维码会展示在第一个二维码下方。如何让点击第二个按钮时也展示一个二维码呢？

要解决这个问题，需要在每次点击支付按钮时，动态生成一个新的二维码容器，并将当前二维码容器插入到页面中。可以将每个二维码容器的状态保存在一个数组中，每次点击支付按钮时，向数组中添加一个新的二维码容器状态，并将该状态传递给子组件进行展示。

具体实现步骤如下：

1. 在 Vue 组件的 `data` 中添加一个数组，用于保存二维码容器的状态。

data() {
  return {
    qrcodeList: []
  }
}

2. 在点击支付按钮时，动态生成一个新的二维码容器状态，并添加到数组中。

methods: {
  // 点击支付按钮
  handlePay(amount) {
    // 调用后端接口获取支付链接或二维码
    api.getPayInfo(amount).then(res => {
      // 生成二维码容器状态
      const qrcode = {
        url: res.data.payUrl,
        amount: amount
      }
      // 添加到数组中
      this.qrcodeList.push(qrcode)
    })
  }
}

3. 在页面中展示所有的二维码容器。

<template>
  <div>
    <!-- 支付按钮 -->
    <button @click="handlePay(10)">支付10元</button>
    <button @click="handlePay(20)">支付20元</button>

    <!-- 二维码容器 -->
    <div v-for="(qrcode, index) in qrcodeList" :key="index">
      <p>支付金额：{{qrcode.amount}}元</p>
      <qrcode :value="qrcode.url"></qrcode>
    </div>
  </div>
</template>

在上面的代码中，`qrcodeList` 数组中保存了所有的二维码容器状态。每次调用 `handlePay()` 方法时，都会向该数组中添加一个新的二维码容器状态。在页面中，使用 `v-for` 指令遍历 `qrcodeList` 数组，动态展示所有的二维码容器。

这样，每次点击支付按钮时，都会动态生成一个新的二维码容器，并展示在页面中，不会出现二维码重叠的问题。